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-oustandings”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

你可以试试这个

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

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

DEMO

但我建议您使用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;
});

DEMO

Answer 3

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

<强> 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();
   )};
});

在div中排除选择器

3 个答案: