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