Question

我有以下on()事件处理程序：

$(document).on('click', '.btn', function() { 
    alert('hi');
});

单击按钮时，我成功获得了一个警告框。

但是我想过滤掉一些按钮。我将一些自定义数据附加到我想要过滤掉的按钮上：data-confirm=true。

我知道我可以为此编写一个选择器，该选择器在Chrome的开发者控制台中运行时有效：

$('.btn [data-confirm!="true"]')

这将返回所有按钮，而data-confirm属性设置为true。

但是，当我将其添加到我的on()方法时：

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

...永远不会调用我的事件处理程序（是否设置了data-confirm）。

选择器中是否存在额外复杂性的问题？

Answer 1

您需要删除班级和属性之间的空格。

您还可以使用jQuery :not()选择器：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">I'm working</button>
<button class="btn" data-confirm="true">I'm not :(</button>

＆＃13;

委托选择器上的jQuery - 不支持我的选择器

1 个答案: