[英]Get clicked element in delegated event with jQuery
我有一些元素,我在加载页面后添加到DOM。 当我点击它们时,我想执行一些操作。 我正在使用带有jQuery的委托但我不知道如何在我处于功能时获取被点击的元素(在这种情况下,$(this)指的是父节点)
<div id="parent">
<div class="child">
<div class="hidden"></div>
</div>
<div class="child">
<div class="hidden"></div>
</div>
</div>
<script>
$('#parent').click('.child', function(){
$(this).find('.child').toggleClass("hidden displayed")
});
</script>
假设当我点击“child”div时,我想将内部div从“hidden”切换为“display”。 目前,当我点击第一个“子”div时,两个“隐藏”div将被切换,我想只切换我点击的div中的一个。
使用e.target
找出事件源自哪个元素。
$('#parent').on('click', '.child', function(e){
$(e.target).toggleClass("hidden displayed")
});
我还修改了一些代码 - 你需要使用.on
来处理委托事件。 (巴马尔提到。)
您需要使用.on()
来委派事件。 正如文件所说:
当jQuery调用处理程序时,
this
关键字是对传递事件的元素的引用; 对于直接绑定事件,这是附加事件的元素,对于委托事件,这是一个元素匹配selector
。
所以它应该是:
$('#parent').on('click', '.child', function() {
$(this).toggleClass("hidden displayed");
};
您使用.click('.child', function...)
不会执行委派。 它匹配函数签名:
.click(eventData, handler)
这里描述。 所以它只是绑定到父,而不是委托给了孩子,这就是为什么你在错误的值this
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.