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

Question

我有这样的代码:

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

在我需要使用委托(delegate)事件处理程序来捕获对将来将添加到页面的元素的点击之前，这一切都很好。

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

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

   $(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 .

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