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

Question

我有一些元素,我在加载页面后添加到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中的一个.

Answer 1

使用e.target找出事件起源于哪个元素.

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

我还修改了一些代码 - 您需要使用.on委托事件.(巴马尔提到.)

Answer 2

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

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

所以它应该是:

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

你的使用.click('.child', function...)不做代表团.它匹配函数签名:

.click(eventData, handler)

这里描述.所以它只是绑定到父母,而不是委托给孩子,这就是你得到错误价值的原因this.