排除在DIV选择

Question

我已经得到了我想要启用点击功能的一个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” 里格或” .client -outstandings-details“不会触发切换。

任何想法？

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