美文网首页jQuery葵花宝典程序员
jQuery|delegate()树应用场景

jQuery|delegate()树应用场景

作者: 明明德撩码 | 来源:发表于2017-12-31 23:44 被阅读5次

    jQuery delegate() 方法。

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

    语法

    $(selector).delegate(childSelector,event,data,function)
    childSelector 必需。规定要添加事件处理程序的一个或多个子元素。
    event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
    data 可选。规定传递到函数的额外数据。
    function 必需。规定当事件发生时运行的函数。

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>delegate demo</title>
      <style>
      p {
        background: yellow;
        font-weight: bold;
        cursor: pointer;
        padding: 5px;
      }
      p.over {
        background: #ccc;
      }
      span {
        color: red;
      }
      </style>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     
    <p>Click me!</p>
     
    <span></span>
     
    <script>
    $( "body" ).delegate( "p", "click", function() {
      $( this ).after( "<p>Another paragraph!</p>" );
    });
    </script>
     
    </body>
    </html>
    

    官方样例:


    image.png image.png

    图中示例:金属材料—>金属结构—>其它结构—>铝合金结构 是一个4层的结构。

    因为和“金属材料”一样的根结构还有很多,如果一次性将他们的子孙结构都一并加载到页面中将会耗时很多,此时,利用单击事件然后通过ajax加载个子的子类别。

    相关文章

      网友评论

        本文标题:jQuery|delegate()树应用场景

        本文链接:https://www.haomeiwen.com/subject/xlragxtx.html