使用 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/

问题作者编辑：

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

似乎 jQuery 中的 .on() 处理程序有一些特定的用法，文档中没有明确说明。

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'); });
   

例如，请参阅this jsbin。

基本上，您只需要在比动态元素更高的范围内进行监听。考虑到根据定义，您要侦听的动态元素是在您的代码运行并注册事件侦听器之后添加/删除的，这是有道理的。

Answer 2

要获取“事件的起始元素”，您可以使用事件对象的target property：

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

但是，这种方法可能不是您真正想要的，因为原始元素实际上可能是 .remove-group 的后代，其“点击”事件只是冒泡了目标元素 - 意味着您在嵌套表的情况下可能会删除错误的行。在.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 替换为在绑定时存在于 DOM 中的最接近的 .remove-group 父元素，并且在预期触发此事件时仍然存在（即是静态的）。这样做可以最大限度地减少在触发事件之前事件必须在 DOM 树中冒泡的距离。

Answer 3

$(this) 应该可以正常工作，但无论如何尝试event.target。

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

演示： http://jsbin.com/inewoc/1/edit