使用 jQuery 在委托事件中获取被点击的元素答案

【问题标题】：Get clicked element in delegated event with jQuery使用 jQuery 在委托事件中获取被点击的元素
【发布时间】：2014-12-26 17:36:44
【问题描述】：

我有一些在页面加载后添加到 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 将被切换，我只想切换我单击的 div 中的一个。

【问题讨论】：

您的委托语法错误。您需要使用.on()，您不能将选择器作为参数提供给.click()。
查看事件参数的区别：event.currentTarget，event.delegateTarget，event.target：api.jquery.com/category/events/event-object

标签： javascript jquery jquery-events

【解决方案1】：

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

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

我还稍微修正了代码 - 您需要将 .on 用于委托事件。（Barmar 提到过。）

【讨论】：

它适用于 .on ！谢谢！因此，似乎在委托事件的情况下 .on("click"...) 和 .click() 根本不一样，并且使用 .on(), $(e.target) = $(this)
+1 这应该是选择的答案。 event.target 实际上回答了一般情况下的问题，例如，当处理程序上下文为 .bind ( that ) 时。
您将如何定位“.child”元素？如果您使用 e.target，它会返回单击的元素，它可能是“.child”的子元素。
我想通了。你会使用 e.currentTarget

【解决方案2】：

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

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

应该是这样的：

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

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

.click(eventData, handler)

描述了here。所以它只是绑定到父级，而不是委托给子级，这就是你在this 中得到错误值的原因。

【讨论】：

你是对的！我认为 .click 和 .on('click'...) 是等价的。谢谢你的解释。
它们只相当于绑定，而不是委托。