使用jQuery的.on函数如何获取事件的原始元素？ [英] Using jQuery's .on function how do I get the originating element for the event?

问题描述

  $（'。remove-group'）。click（function（）{
 $（this）.closest（'tr'）。remove（）; 
}）; 
  

直到我需要使用委托事件处理程序捕获将添加到

$ $ $ $ $ $ $ $ $（document）.on（'click'，'.remove-group'，function（ ）{
$（this）.closest（'tr'）。remove（）;
}）;

由于 this 关键字不再有效没有引用原始元素。

任何想法？

更新

看起来，在我努力简化我的问题的代码的过程中，我实际上已经完成了它的工作。我实际上正在传递一个包含集合的变量，而不是字符串选择器。

  var $ removeGroup = $（ 卸下摆臂组）; 
 $（document）.on（'click'，$ removeGroup，function（）{
 $（this）.closest（'tr'）。remove（）; 
}）; 
  

这样做似乎并不奏效。

解决方案

希望这可以帮助某人：

  $（' （'click'，'.remove-group'，function（event）{
 $（this）; //返回$（'。remove-group'）相当于
 $ （event.target）; //返回$（'。remove-group'）相当于
 
 $（event.delegateTarget）; //返回$（'＃container'）equivalent 
} ）; 
  

参考： http://api.jquery.com/event.delegateTarget/

编辑问题作者：

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

它似乎是 .on （）在jQuery中的处理程序有一些具体的用法，在文档中没有清楚地说明。

1. <

    <$ c $> （'click'，function（）{$（this）.css（'border'，'solid 1px red'）;}）; 
     

   它可以工作，但它会 NOT 动态应用于任何未来的元素使用相同的选择器添加到页面。这与 .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 。

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

I had code like this:

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

This worked fine until I needed to use delegated event handler to capture clicks for elements that will be added to the page in the future.

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

This no longer works because the this keyword does not refer to the originating element.

Any ideas?

Update

It would seem that in my efforts to simplify the code for my question I actually made it work. I was actually passing in a wrapped set that was assigned to a variable instead of the string selector.

var $removeGroup = $('.remove-group');
$(document).on('click', $removeGroup, function () {
    $(this).closest('tr').remove();
});

That doesn't seem to work when I do it that way.

解决方案

Hope this helps someone:

$('#container').on('click', '.remove-group', function(event) {
  $(this);          // returns $('.remove-group') equivalent
  $(event.target);  // returns $('.remove-group') equivalent

  $(event.delegateTarget);  // returns $('#container') equivalent
});

Reference: http://api.jquery.com/event.delegateTarget/

Edit from question author:

I just want to clarify some of the mistakes I originally made.

It would seem the .on() handler in jQuery has some specific usage that isn't clearly spelled out in the documentation.

1. You can use .on() directly on the selector itself:

   $('button').on('click', function () { $(this).css('border', 'solid 1px red'); });
   

   It will work, but it will NOT apply to any future elements dynamically added to the page with the same selector. This is different from the way .live() used to work. You must bind to the document object to catch future elements as well as current ones. This is because the selector is now the element you are listening on and it will catch all click events that bubble up to that element (document being one of the topmost elements to listen on). Then you pass the selector for the element you're interested in as a second argument after the event name.

   $(document).on('click', 'button', function () { $(this).css('border', 'solid 1px red'); });
   

   Now the listener will filter out click events until it finds one that was originally fired on 'button' and bubbled up to document.

2. You must supply a string selector, not a wrapped set. This will not work:

   var $buttons = $('button');
   $(document).on('click', $button, function () { $(this).css('border', 'solid 1px red'); });
   

For examples, see this jsbin.

Basically you just have to listen on a higher scope than the dynamic element. This makes sense considering that the dynamic elements you want to listen for are, by definition, being added/removed after your code runs and registers your event listener.

这篇关于使用jQuery的.on函数如何获取事件的原始元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！