17

我有这样的代码：

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

当我这样做时，这似乎不起作用。

4

3 回答 3

30

希望这可以帮助某人：

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

例如，请参阅此 jsbin。

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

于 2013-11-24T07:06:37.070 回答
10

要获取“事件的原始元素”，您将使用事件对象的target属性：

$(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 树的距离。

于 2012-09-15T22:04:58.297 回答
1

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

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

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

于 2012-09-15T22:05:55.760 回答