2014-06-29 83 views
0

我做了下面的代碼,以澄清一個問題:如何動態地在事件處理程序之外通過此事件處理程序創建的元素來追加元素?

HTML:

<body> 
<div class="static">This is a static div</div> 
<button class="add-dynamic-button">Click me to add a new button</button> 
</body> 

JS:

$(function(){ 
$('.add-dynamic-button').on("click",function(){ 
    $('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>"); 
}); 
    $('.dynamic-button').on('click',function(){ 
     $('body').append("<div class='dynamic-div'>This is a dynamic div</div>"); 
}); 
}); 

而這裏的jsfiddle測試:http://jsfiddle.net/6ZN5J/

當我有$('。dynamic-button')。on('click')處理程序在第一個點擊處理程序中,.dynamic-div被添加好。 但是,當我把它放在第一個點擊處理程序範圍之外時(如上例),沒有任何反應。我最初認爲$ .on適用於任何尚未創建的DOM元素,但現在事實證明,如果它們已經在DOM中或$ .on被放置在內部,它就可以處理同一類或類型的新元素創建這些元素的函數。 你能否澄清爲什麼會發生這種情況,以及是否有任何方法允許在創建的處理程序之外的動態創建的元素上使用事件處理程序? 謝謝

回答

0

$()是一個選擇器。它會在您執行此操作時查找文檔中的元素或您正在執行整個查詢的父元素。

如果您想了解更多的按鈕勢必click情況下,您需要手動將它們綁定:

$('body').append("<button class='dynamic-button'>Click me to add a dynamic div'</button>") 
     .on("click", ....); 
相關問題