jquery html动态添加的元素绑定事件详解

当您使用 jQuery 向 DOM 中添加新元素时，这些元素需要相应的事件处理程序来响应用户的交互。为动态添加的元素绑定事件处理程序，可以使用 jQuery 的 on() 方法。例如，以下代码会为在父元素 div 中动态添加的子元素 span 绑定点击事件处理程序：

$('div').on('click', 'span', function() {
  // 点击事件处理程序
});

在这个例子中，on() 方法传递三个参数。第一个参数是事件类型，例如 'click'。第二个参数是一个选择器，它指定要绑定事件处理程序的元素，例如 'span'。第三个参数是事件处理程序函数。关键是第二个参数，它指定了要绑定事件处理程序的元素，这个元素可能是动态添加的，因此在添加到 DOM 的时候可能还不存在。但是，当使用 on() 方法时，jQuery 会在父元素 div 上绑定事件处理程序，然后根据选择器 'span' 来过滤出真正的目标元素并触发事件处理程序。这种技术称为“事件委托”，它可以帮助我们在动态添加元素时避免频繁绑定和解绑事件处理程序的问题。