jQuery 中的 delegate() 方法有什么用？

jQuery 中的 delegate() 方法用于为指定元素的子元素绑定事件。相比直接给子元素绑定事件，使用 delegate() 方法可以在动态添加子元素时不必重新绑定事件。

语法

$(selector).delegate(childSelector,event,data,handler)

参数说明：

• selector: 用于绑定事件的父元素的选择器。
• childSelector: 子元素的选择器。
• event: 要绑定的事件类型，如 click、mouseenter 等。
• data: 传递给事件处理程序的额外数据。
• handler: 被绑定的事件处理程序。

示例

HTML 代码：

<div id="parent">
  <button>添加子元素</button>
  <ul>
    <li>子元素1</li>
    <li>子元素2</li>
  </ul>
</div>

JavaScript 代码：

$("#parent").delegate("li", "click", function() {
  console.log($(this).text() + " 被点击了！");
});

$("#parent button").click(function() {
  $("#parent ul").append("<li>子元素" + ($("li").length + 1) + "</li>");
});

上面的代码绑定了一个 click 事件监听器，当子元素被点击时会输出其文本内容。同时，在按钮被点击时也会向 ul 元素中添加一个新的子元素。由于通过 delegate() 方法绑定的事件监听器是在父元素上，因此新添加的子元素也会受到影响。

总结

通过 delegate() 方法，我们可以轻松实现在动态添加子元素时不必重新绑定事件，提高了代码的维护性和效率。如果需要绑定的元素是静态的，推荐使用 on() 方法绑定事件。