来自问题作者编辑：

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()处理程序有一些特定的用法，在文档中没有明确说明。

您可以直接在选择器本身上使用.on()：
```
$('button').on('click', function () { $(this).css('border', 'solid 1px red'); });
```
它会起作用，但 NOT 将应用于动态添加到具有相同选择器的页面的任何未来元素。这与.live()过去的工作方式不同。您必须绑定到文档对象以捕获将来的元素以及当前元素。这是因为选择器现在是您正在侦听的元素，它将捕获所有冒泡到该元素的单击事件（文档是要监听的最顶层元素之一）。然后，将您感兴趣的元素的选择器作为事件名称后面的第二个参数传递。
```
$(document).on('click', 'button', function () { $(this).css('border', 'solid 1px red'); });
```
现在，侦听器将过滤掉点击事件，直到找到最初在“按钮”上触发并冒泡到文档的事件。

您必须提供字符串选择器，而不是包装集。这不起作用：

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祖先。你可以（并且应该）用绑定时存在于DOM中的document最近的父元素替换.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

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

更新

3 个答案:

来自问题作者编辑：