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

Using jQuery's .on function how do I get the originating element for the event?

本文关键字：获取 事件 原始 元素 何获取 on jQuery 函数 使用      更新时间：2023-09-26

我有这样的代码：

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

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

希望这对某人有所帮助：

$('#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。

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

若要获取">事件的原始元素"，可以使用事件对象的 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 树中冒泡的距离。

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

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

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

相关文章：