addClass一個DIV，然後點擊應用到新類，jQuery的

Question

小提琴：http://jsfiddle.net/8TxmK/

我有兩個div，一個具有類=「BB」，另一個沒有類。在我的jQuery，我申請了以下功能：

$('div').on('click',(function(){ 

    $(this).addClass('bb'); 

})); 

$('.bb').on('click',(function(){ 

    alert('bb class clicked') 

})); 

所以我想addClass「BB」，到第二個div被點擊時。這工作正常。然而，點擊的第二部分'bb'不適用於從一開始就沒有加載'bb'類的div。

有沒有解決方法？

我試過這個：http://jsfiddle.net/M8Ja4/ 但是函數每次都重複一次。

Answer 1

是..代表。將身體替換爲當dom加載時存在的最近的父親

$('body').on('click','.bb',function(){ 

}); 

Answer 2

您有兩種選擇。如果您對jQuery的1.7+，使用.on()方法附加動態事件處理程序：

$(document).on('click','.bb',function() { }); 

如果您在使用jQuery的舊版本，使用.delegate()：

$(document).delegate('.bb','click',function() { }); 

雖然這些例子都使用document，你可以使用任何DOM元素。我的建議是使用最低的一個（距離元素最近的祖先到.bb），這樣可以更快地捕獲事件，並在必要時防止傳播一直到文檔級別。您可能會聽說.live()方法，但在1.7版本中已被棄用，jQuery團隊建議即使在較早的項目中也停止使用該方法。

您的example發表在另一個答案的評論是一個事件冒泡的完美例子。

<style> 
    div{width:300px;height:100px;background:pink;margin-bottom:10px;} 
    .bb{border:10px solid black;} 
​</style> 

<div></div> 
<div class="bb"></div> 

<script> 
    $(document).ready(function() }{ 

     $('div').on('click',(function(){ 
      $(this).addClass('bb'); 
     })); 

     $('body').on('click','.bb',function(){ 
      alert('bb class clicked'); 
     }); 
    ​}); 
</script> 

在這個例子中，當你在div點擊沒有bb類，它得到的類。接着，添加事件冒泡到body並觸發存在，這就是爲什麼警報的彈出點擊第一個。