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

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>

比方说，当我点击"子"div时，我想将内部div从"隐藏"切换到"显示"。目前，当我单击第一个"子"时，两个"隐藏"div将被切换，我只想切换我点击的div中的一个。

Answer 1

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

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

我还修复了一些代码——您需要对委派事件使用.on。（Barmar提到）

Answer 2

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

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

所以应该是：

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

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

.click(eventData, handler)

此处描述。所以它只是绑定到父级，而不是委托给子级，这就是为什么在this中得到错误的值。