使用.on()在委派而不是直接时返回单击的元素

时间:2016-02-17 19:26:56

标签: javascript jquery

在委派事件而不是直接分配事件时,是否可以返回单击的元素(例如使用$(this))?在下面的示例中,JS Direct警告单击的.test元素的类,而JS Delegating警报未定义。

HTML

<div>
  <button class='test one'>one</button>  
</div>

<div>
  <button class='test two'>two</button>  
</div>

JS Direct - (警告&#39;测试一个&#39;或者测试两个&#39;)

$('.test').on('click', function() {

    alert($(this).attr('class'));

});

JS委托 - (提醒&#39;未定义&#39;)

$(document).on('click', $('.test'), function() {

    alert($(this).attr('class'));

});

2 个答案:

答案 0 :(得分:2)

您只需要正确的语法。

我不确定当你传递$('.test')时jQuery正在做什么,但净效应似乎是&#34;绝对匹配所有&#34;。点击某个不是按钮的地方,您仍然会收到提醒。

on的第二个参数应该是字符串,其中包含选择器,而不是jQuery对象。

$(document).on('click', '.test', function() {

...然后this按预期工作。

(传递jQuery对象没有任何意义,因为使用委托选择器的目的是匹配在绑定事件处理程序时可能不存在的元素......并且你不能这样做如果你必须获取元素并在绑定事件之前将它们包装在jQuery中!)

答案 1 :(得分:1)

是的,您的回调接收包含事件目标的事件对象作为参数。

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

$(document).on('click', $('.test'), function(event) {
    alert($(event.target).attr('class'));

});