嵌套相同class元素导致jQuery点击事件触发两次的解决方法

这个问题我之前开发时也碰到过！核心原因是事件冒泡机制：当你点击内部的<i class="remove">元素时，点击事件会沿着DOM树向上传递，外层的<button class="remove">也会触发绑定在body上的同类型委托事件，导致你的console.log('test')执行了两次。

几种可行的修复方案： #

1. 阻止事件冒泡

在事件处理函数中添加e.stopPropagation()，阻止事件向上冒泡，这样内部元素的事件触发后，不会再触发父元素的同类型事件：

$('body').on('click', '.remove', function(e) { 
  e.preventDefault(); 
  e.stopPropagation(); // 阻止事件冒泡到父级元素
  console.log('test'); // 现在只会执行一次
})

2. 区分当前触发事件的目标元素

利用事件对象的currentTarget（委托事件中匹配选择器的元素）和target（实际点击的元素）进行判断，只处理直接匹配选择器的元素，忽略冒泡上来的事件：

$('body').on('click', '.remove', function(e) { 
  e.preventDefault(); 
  // 只有当触发事件的元素是匹配.selector的元素本身时才执行逻辑
  if (e.target === e.currentTarget) { 
    console.log('test'); 
  } 
})

3. 优化DOM结构（推荐）

如果你的需求是点击整个按钮都触发删除逻辑，其实不需要给内部的<i>标签添加remove类，只保留外层<button>的remove类即可，从根源上避免重复触发：

<button type="button" class="btn remove"><i class="fas fa-trash">Remove icon</i></button>

对应的JS代码可以简化为：

$('body').on('click', '.remove', function(e) { 
  e.preventDefault(); 
  console.log('test'); 
})

内容的提问来源于stack exchange，提问作者jemz