使用jQuery的.on函数如何获取事件的原始元素？

Question

我有这样的代码:

$('.remove-group').click(function () {
    $(this).closest('tr').remove();
});

这工作正常,直到我需要使用委托事件处理程序来捕获将来将添加到页面的元素的点击.

$(document).on('click', '.remove-group', function () {
    $(this).closest('tr').remove();
});

这不再有效,因为this关键字不引用原始元素.

有任何想法吗？

更新

似乎在我努力简化我的问题的代码我实际上使它工作.我实际上是在传递一个包装的集合,该集合被分配给变量而不是字符串选择器.

var $removeGroup = $('.remove-group');
$(document).on('click', $removeGroup, function () {
    $(this).closest('tr').remove();
});

当我这样做时,这似乎不起作用.

Answer 1

希望这有助于某人:

$('#container').on('click', '.remove-group', function(event) {
  $(this);          // returns $('.remove-group') equivalent
  $(event.target);  // returns $('.remove-group') equivalent

  $(event.delegateTarget);  // returns $('#container') equivalent
});

参考:http://api.jquery.com/event.delegateTarget/

来自问题作者的编辑:

我只想澄清一下我最初犯的一些错误.

看起来.on()jQuery中的处理程序有一些特定的用法,在文档中没有明确说明.

1. 您可以.on()直接在选择器上使用:

   $('button').on('click', function () { $(this).css('border', 'solid 1px red'); });
   

   它会工作,但它不适用于动态添加到页面相同的选择任何未来的元素.这与.live()以前的工作方式不同.您必须绑定到文档对象以捕获将来的元素以及当前元素.这是因为选择器现在是您正在侦听的元素,它将捕获所有冒泡到该元素的单击事件(文档是要监听的最顶层元素之一).然后,将您感兴趣的元素的选择器作为事件名称后面的第二个参数传递.

   $(document).on('click', 'button', function () { $(this).css('border', 'solid 1px red'); });
   

   现在,侦听器将过滤掉单击事件,直到找到最初在"按钮"上触发并向上冒泡到文档的事件.

2. 您必须提供字符串选择器,而不是包装集.这不起作用:

   var $buttons = $('button');
   $(document).on('click', $button, function () { $(this).css('border', 'solid 1px red'); });
   

例如,请参阅此jsbin.

基本上你只需要听一个比动态元素更高的范围.考虑到您希望监听的动态元素在您的代码运行并注册事件监听器之后被添加/删除,这是有道理的.

Answer 2

要获取" 事件的原始元素 ",您将使用事件对象的target属性:

$(document).on('click', '.remove-group', function (e) {
    $(e.target).closest('tr').remove();
});

但是,这种方法可能不是您真正想要的,因为原始元素实际上可能是.remove-group其"click"事件的后代,只是冒出目标元素 - 这意味着您可能会在嵌套表的情况下删除错误的行.在.on()处理程序的上下文this中,实际上是指与之匹配的元素.remove-group.要使用此元素绑定到委托事件.on(),语法如下:

$(static-parent-element).on(event, selector-string, handler)

例如,这是正确的语法:

$(document).on('click', '.remove-group', function () {
    $(this).closest('tr').remove();
});

这将匹配当前和未来的.remove-group元素,并删除最近的tr祖先.您可以(并且应该)document在.remove-group绑定时替换DOM中最接近的父元素,并且只要期望触发此事件(即静态),它仍然存在.这样做可以最小化事件在触发事件之前冒泡DOM树的距离.