jQuery事件委托异常：点击元素触发所有.on('click')事件原因排查

使用jQuery 3.7.1时，点击API返回数据后动态生成的.element1或.element2元素，所有绑定的on('click')事件都会被触发。示例代码如下：

$(function() {
  let $body = $('body'),
    $element1 = $('.element1'),
    $element2 = $('.element2');

  $body.on('click', $element1, function () {
    console.log('element 1');
  });

  $body.on('click', $element2, function () {
    console.log('element 2');
  });
});

• 你错误地将提前获取的jQuery对象（$element1、$element2）作为事件委托的选择器参数。页面初始化时动态元素还未生成，此时$('.element1')和$('.element2')都是空的jQuery对象。
• 当jQuery接收到空对象作为委托选择器时，会将其解析为“匹配所有元素”的条件，导致任何点击事件冒泡到body时，两个事件处理函数都会被触发。
• 即使元素已存在，用jQuery对象作为委托选择器的方式也不符合事件委托的设计逻辑——事件委托需要传入字符串选择器，才能让jQuery在事件冒泡过程中检查目标元素是否匹配。

将事件委托的第二个参数改为字符串形式的选择器，而非提前获取的jQuery对象。这样jQuery就能正确识别动态生成的元素，并在点击时匹配对应的选择器，只触发对应的事件处理函数。

修正后的代码：

$(function() {
  let $body = $('body');

  $body.on('click', '.element1', function () {
    console.log('element 1');
  });

  $body.on('click', '.element2', function () {
    console.log('element 2');
  });
});

内容的提问来源于stack exchange，提问作者Kristjan O.