jQuery on委托选择器问题：无法筛选排除指定data属性的按钮

我来帮你搞定这个问题！你遇到的核心问题是选择器里多了个空格，导致事件委托的目标元素匹配错了，咱们一步步来解决：

错误原因分析 #

你用的选择器$('.btn [data-confirm!="true"]')里，.btn和[data-confirm!="true"]之间的空格是后代选择器，它会匹配所有带有.btn类的元素的子元素中符合属性条件的元素，而不是你想要的「自身带有.btn类且data-confirm不等于true的按钮」。这就是为什么把它放到on()方法里不生效的原因。

解决方案一：修正选择器（推荐语义化写法） #

使用:not()伪类选择器，明确排除带有data-confirm="true"的.btn元素，写法清晰易懂：

$(document).on('click', '.btn:not([data-confirm="true"])', function() {
    alert('hi');
});

也可以直接去掉空格，使用属性不等于选择器（效果和上面一致，但:not()语义更直观）：

$(document).on('click', '.btn[data-confirm!="true"]', function() {
    alert('hi');
});

解决方案二：在事件回调内判断（更灵活） #

如果后续需要添加更多排除条件，在回调函数里直接判断当前元素的属性会更灵活，不用频繁调整选择器：

$(document).on('click', '.btn', function() {
    // 检查当前按钮的data-confirm是否为true，是的话直接返回不执行后续逻辑
    if ($(this).data('confirm') === true) {
        return;
    }
    alert('hi');
});

这种方法尤其适合动态生成按钮的场景，不管按钮什么时候添加，判断逻辑都能生效。

验证小技巧 #

你可以在控制台用正确的选择器测试，比如$('.btn:not([data-confirm="true"])')，看看返回的是不是你想要的按钮集合，确认没问题再放到on()方法里就可以啦。

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