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

Read 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'); 
     }); 
    });