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用于委派事件。（Barmar提到。）

Answer 2

您需要使用.on()委派活动。正如documentation所说：

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

所以它应该是：

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

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

.click(eventData, handler)

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

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

2 个答案: