使用jQuery获取委派事件中的clicked元素

我有一些元素，我在加载页面后添加到DOM。 当我点击它们时，我想执行一些操作。 我正在使用带有jQuery的委托但我不知道如何在我处于function状态时获取被点击的元素（在这种情况下，$（this）指的是父节点）

 
 
 
 
 
 
 
  $('#parent').click('.child', function(){ $(this).find('.child').toggleClass("hidden displayed") });  

假设当我点击“child”div时，我想将内部div从“隐藏”切换到“显示”。 目前当我点击第一个“子”div时，两个“隐藏”div将被切换，我想切换我点击的div中的一个。

Answer 1

您需要使用.on()来委派事件。 正如文件所说：

当jQuery调用一个处理程序时， this关键字是对传递事件的元素的引用; 对于直接绑定事件，这是附加事件的元素，对于委托事件，这是一个元素匹配selector 。

所以它应该是：

 $('#parent').on('click', '.child', function() { $(this).toggleClass("hidden displayed"); }; 

您使用.click('.child', function...)不会执行委派。 它匹配function签名：

 .click(eventData, handler) 

这里描述。 所以它只是绑定到父级，而不是委托给孩子，这就是为什么你得到错误的价值。

Answer 2

使用e.target找出事件源自哪个元素。

 $('#parent').on('click', '.child', function(e){ $(e.target).toggleClass("hidden displayed") }); 

我还修改了一些代码 – 你需要使用.on代表委托事件。 （巴马尔提到。）