jquery - 排除 div 中的选择器

Question

我想在一个 div 上启用点击功能，但不是 div 内的“a”标签或它正在切换的 div:

HTML

 <div class='row client-outstandings'>
  <div class='twelve columns'>
    <div class='panel'>
      <h3><a href="{% url clients.views.view_client c.client.id %}" target="_blank">{{ c.client }}</a> - {{ c.total|currency }}</h3>
      <div class='client-outstandings-details' style='display:none;'><a href="">Blah blah</a> </div>
    </div>
  </div>
</div>

代码:

$(function () {

    $('.client-outstandings').live('click', function () {
        $(this).find('.client-outstandings-details').toggle('fade');
    });

});

我正在尝试使“.client-oustands”div 或“.client-outstandings-details”内的任何“a”标签不会触发切换。

有什么想法吗？

Answer 1

live 方法已弃用，您可以使用 on 方法代替:

$(document).on('click', '.client-outstandings', function () {

为了防止事件冒泡，可以使用 stopPropagation 方法:

$('a').click(function(event) {
    event.stopPropagation()
})

请注意，要使用 on 方法委托(delegate)事件，您应该使用静态父元素(哪个更好)或文档对象。