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

Here's 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，并使用#tag

指向它

使用具有特定属性的.on（）和目标元素

4 个答案: