jQuery on绑定区域点击事件如何排除特定子元素触发

你之前写的选择器逻辑不对：.member:not(.icon-remove)只会筛选「自身class包含member、且不包含icon-remove」的元素，没法过滤member内部的icon-remove子元素点击。
事件委托的匹配逻辑是沿点击源向上冒泡，逐层匹配符合选择器的元素。你点X图标时，事件冒泡到父级li.member时，li本身符合.member:not(.icon-remove)的规则（li没有icon-remove类），所以还是会触发绑定的点击函数。

两种方法都能实现效果，第二种更适配你要给X图标单独绑逻辑的需求：

方法1：回调内判断点击源 #

在member的点击回调里，先判断点击的是不是删除图标，是的话直接终止逻辑：

$("#team_members").on('click', ".member", function(e) {
    // 点击范围在删除图标内就直接返回
    if ($(e.target).closest('.icon-remove').length) return;
    // 原有业务逻辑
    alert("clicked!");
});

用closest()是做兼容，就算icon-remove内部还有嵌套标签，只要点在图标范围内都能识别到。

方法2：图标事件里阻止冒泡 #

你本来就要给X图标绑独立逻辑，直接在图标自己的点击事件里阻止事件向上冒泡，点图标时就不会触发父级member的点击回调：

// 成员项的点击绑定，不需要额外加过滤选择器
$("#team_members").on('click', ".member", function(e) {
    alert("clicked!");
});

// 删除图标独立逻辑绑定
$("#team_members").on('click', ".icon-remove", function(e) {
    // 阻止事件向上冒泡到父级成员项
    e.stopPropagation();
    // 写删除图标对应的业务逻辑，比如移除当前成员项
    alert("点击了删除按钮");
});

注意：别用return false代替e.stopPropagation()，jQuery里return false会同时阻止冒泡和元素默认行为，可能导致意料之外的问题。

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