时间戳

首页 > 解决方案 > 委托选择器上的 jQuery - 不支持我的选择器

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

问题描述

我有以下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设置）。

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

标签： javascriptjquery

解决方案

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

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

$(document).on('click', '.btn:not([data-confirm="true"])', function() { 
    alert('hi');
});
<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>

推荐阅读