jQuery的創造元素，並使用它

Question

例如，我有這樣的：

<div id="buttons"> 
    <button class="button">Click</button> 
</div> 

<script> 
    $(document).ready(function() { 
     $('.button').click(function() { 
      $('#buttons').append('<button class="button">Click</button>'); 
     }); 
    }); 
</script> 

當我按下「點擊」按鈕，該腳本將創建一個具有相同類別「按鈕」的新按鈕。 當我按下這個新按鈕 - 沒有任何反應。

我明白爲什麼，但我不知道如何避免這種情況。 我想我的腳本「看到」剛剛創建的按鈕。

Answer 1

使用on綁定到委託事件

$("#buttons").on("click", ".button", function() { 
    $('#buttons').append('<button class="button">Click</button>');  
}); 

例子：http://jsfiddle.net/66H8W/

Answer 2

讀http://api.jquery.com/on/，要特別注意 「直接和委託的事件」 一節。

Answer 3

你好演示：http://jsfiddle.net/vcrF3/ **或http://jsfiddle.net/vcrF3/1/

http://api.jquery.com/on/報價

事件-地圖的地圖，其中所述字符串鍵表示一個或多個 空格分隔的事件類型和可選的名稱空間，並且值 表示要爲事件調用的處理函數。

jQuery代碼

$.fn.ready(function() { 
     $('div').on("click", ".button", function() { 
      $('#buttons').append('<button class="button">Click</button>'); 
      // alert('append button is clicked'); 
     }); 
    });