在jQuery委托事件中获取单击元素

我有一些元素在页面加载后添加到DOM中。我想在点击它们时执行一些操作。我使用jQuery的代表团，但我不知道如何获得点击的元素，当我在fonction我（$（这）是指在这种情况下，父）在jQuery委托事件中获取单击元素

<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中的一个。

来源

2014-10-30 ValLeNain

您的委托语法错误。你需要使用'.on（）'，你不能给选择器作为'.click（）'的参数。 – Barmar 2014-10-30 15:32:43

查看事件参数之间的差异：'event.currentTarget'，'event.delegateTarget'，'event.target'：http://api.jquery.com/category/events/event-object/ – Sacho 2014-10-30 15:32:58

您需要使用.on()来委派事件。作为documentation说：

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

所以它应该是：

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

您使用的.click('.child', function...)不做代表团。它匹配功能签名：

.click(eventData, handler)

描述here。所以这只是绑定到父母，而不是委托给孩子，这就是为什么你在this中得到错误的值。

来源

2014-10-30 15:35:59 Barmar

你是对的！我认为.click和.on（'click'...）是相同的。感谢您的解释。 – ValLeNain 2014-10-30 15:42:03

他们只是等同于绑定，而不是委托。 – Barmar 2014-10-30 15:42:20

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

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

我也修复了一下代码 - 您需要使用.on来委派事件。（由Barmar提到）

来源

2014-10-30 15:30:42 Scimonster

它适用于。上！谢谢！因此，在委托事件.on（“click”...）和.click（）与.on（），$（e.target）= $（this）并不相同的情况下， – ValLeNain 2014-10-30 15:39:06

+1这应该是选择的答案。 'event.target'实际上回答了一般情况下的问题，例如，当处理程序上下文是'.bind（that）'时。 – Nolo 2017-03-14 07:52:12

在jQuery委托事件中获取单击元素

回答

相关问题