0

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

4

4 回答 4

0

尝试

$("span[data-placeholder]", this.el).on("click", function () {
    alert("Bloop!");
});
于 2013-10-08T21:34:22.080 回答
0

您可以选择过滤跨度

$('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');
     }
});
于 2013-10-08T21:45:03.963 回答
0

这是 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。

于 2013-10-08T21:48:42.043 回答
-2

为您的跨度添加一个 id 并使用 # 标记对其进行定位

于 2013-10-09T04:59:49.067 回答