我有引导按钮组。此外,基于jQuery的事件处理程序(使用事件委托)可基于click事件在适当的.btn上设置/取消启动.active类。
当我的按钮中包含html元素时,就会发生问题。当您单击按钮的子元素时,将在.btn的子元素上设置.active类。
如何只接收我感兴趣的精确元素的事件?
http://jsfiddle.net/0nc3wjq4/
要重现该问题,请单击按钮中的一个数字,然后单击另一个按钮中的另一个数字。
<div class="btn-group btn-group-justified pipeline" role="group">
<a href="#" class="btn btn-default" role="button">
<h3 class="text-center">767</h3>
<p class="text-muted text-center">Stage1</p>
</a>
</div>
事件处理程序
$( ".btn-group" ).on( "click", ".btn", function( e ) {
$(this).siblings(".active").removeClass('active'); // previous
$(e.target).addClass('active'); // current
});
最佳答案
将$(e.target)
替换为$(this)
e.target
显示为h3
/ p
而不是button
e.target
是触发事件的元素,即-单击的h3
将事件传播到a.btn
。然后被事件处理程序捕获。this
是触发处理程序的元素。