使用 .on() 并定位具有特定属性的元素答案

【问题标题】：Using .on() and targeting elements with a specific attribute使用 .on() 并定位具有特定属性的元素
【发布时间】：2013-10-16 00:49:13
【问题描述】：

我知道您可以使用.on() 将单击事件附加到元素，然后指定哪些子元素接收单击。所以，例如：

$(this.el).on("click", "span", function () {
    alert("Bloop!");
});

我需要更具体一点，并针对具有特定属性的选择器，如下所示：

$(this.el).on("click", "span[data-placeholder]", function () {
    alert("Bloop!");
});

不过，这似乎不起作用。一旦我添加了属性，它就会停止工作。没有错误，只是似乎没有找到元素。

这是预期的行为吗？有办法解决吗？

清晰度

$(this.el) 只是一个包含许多元素的 div，其中一些是<span data-placeholder="First Name"></span> 标签。可能有几十个 <span> 标签，我不想要那么多事件监听器，所以我想我会使用 .on() 将点击添加到父容器。

【问题讨论】：

只要 span 有 data-placeholder 属性，这应该可以工作。请注意，.data() 不会创建属性。
你是通过数据api设置placeholder吗？如果是这样，它不会创建属性。否则它应该可以工作。
你能显示你的实际代码jsfiddle.net吗？
什么是this.el？如果它是一个跨度，它将不起作用，因为您的语法用于委派
@Starx 好吧，自从第一个 sn-p 工作以来，我们知道它是 span 的父级。

标签： javascript jquery events jquery-selectors

【解决方案1】：

试试

$("span[data-placeholder]", this.el).on("click", function () {
    alert("Bloop!");
});

【讨论】：

这将在每个元素上分别附加事件处理程序，据我所知，这是 OP 试图避免的。
@vp_arth 例如，如果元素中的spans 在创建事件处理程序后被删除并重新创建。阅读delegated events。

【解决方案2】：

你可以选择过滤你的跨度

$('span', this.el).filter(function() {
     return $(this).hasAttr('data-placeholder');
}).on('click', function() {
   //This is for all the spans having data-placeholder
   //...
});

或者如果placeholder是通过数据api设置的：

$(this.el).filter(function() {
     return $(this).data('placeholder') != 'undefined';
}).on('click', function() {
   //This is for all the spans having data-placeholder
   //...
});

上面的这个函数专门选择那些元素，如果需要在 OP 上进行事件委托，那么您可以执行以下操作：

$('span', this.el).on('click', 'span', function() {
     if($(this).data('placeholder') != 'undefined') {
         alert('bloop');
     }
});

【讨论】：

你认为他为什么不想使用事件委托？
@MattiVirkkunen，因为我认为这不是故意的。
你肯定错过了我句子开头的“为什么”
@MattiVirkkunen，哦..由于这条线need to be a bit more specific and target selectors with a particular attribute
@Starx 我认为正好相反。

【解决方案3】：

Here's JSFiddle 显示您的示例在现有的<span>s 和新创建的@s 中都有效。

需要明确的是，这将适用于您的事件委托：

var span = $('<span>Test</span>');
span.attr('data-placeholder', 'test'); // declare as an attribute
$(this.el).append(span);
span.click();

这不会：

var span = $('<span>Test</span>');
span.data('placeholder', 'test'); // declare with .data()
$(this.el).append(span);
span.click();

jQuery 的.data() 方法会在声明时从数据属性中读取属性，但在添加数据时不会将它们作为属性存储在元素上。

这是另一个JSFiddle。

【讨论】：

【解决方案4】：

为你的 span 添加一个 id 并使用 #tag 精确定位它

【讨论】：