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 回答