我有引导按钮组。此外,基于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是触发处理程序的元素。

07-24 17:43
查看更多