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-outstandings”div 或“.client-outstandings-details”中的任何“a”标签都不会触发切换。

有任何想法吗？

Answer 1

live不推荐使用方法，您可以改用on方法：

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

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

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

请注意，对于使用on方法委托事件，您应该使用静态父元素（更好）或文档对象。

Answer 2

我认为您正在寻找以下内容：

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>
      <a href="" class="outstandingsAnchor">Blah blah</a>
    </div>
  </div>
</div>

jQuery

$(function () {
    $(document).on('click', 'a.outstandingsAnchor', toggle(function() {(
       $(this).wrap('<div class="client-outstandings-details" />');
    }, function() {
       $(this).unwrap();
   )};
});

Answer 3

你可以试试这个

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

$('.client-outstandings a').live('click', function(e){
    e.stopPropagation();
    return true;
});

演示。

但我建议你使用on. 使用on代码是

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

$('.client-outstandings').on('click', 'a', function(e){
    e.stopPropagation();
    return true;
});

演示。