使用.on（）并使用具有特定属性的定位元素

Question

我了解您可以使用.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()将点击添加到父容器中。

Answer 1

尝试

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

Answer 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');
     }
});

Answer 3

这是JSFiddle，它显示您的示例在现有的<span>和新创建的示例中都可以使用。

请明确说明，这将与您的事件委派一起使用：

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 。

Answer 4

在您的跨度中添加ID并使用＃标签将其指向