jQuery append and binding click event using on

Question

Я пытаюсь создать строку таблицы с кнопкой в ​​ней, которая при нажатии создает новую строку таблицы. Новая строка также имеет ту же кнопку «добавить строку» на ней, и я хотел бы иметь возможность щелкнуть эту кнопку, чтобы добавить еще одну строку. Но я не могу заставить событие click связываться с элементом, который добавляется в событие click. Я уверен, что использую «on» неправильно, но я не могу понять, как это сделать.

http://jsfiddle.net/vivojack/WkfvC/2/

мой (упрощенный) HTML

<table id="ct"> 
    <tbody> 
    <tr id="list_items_11" class="list_item"> 
     <td>This Line</td> 
     <td><input type="button" name="addNewArea" class="addNewArea button" value="+"></td> 
     </tr> 
    </tbody> 
</table> 

мой (упрощенный) Javascript

$('#ct tbody tr td').on('click', '.addNewArea', function(event) { 
    var areaCount = $('#ct tbody tr').length; 
    var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>'; 
    $(newAreaLine).appendTo('#ct tbody'); 
    $(this).remove(); 
}); 

Спасибо заранее.

Answer 1

Вы должны привязать обработчик к элементу, который не является динамическим. Вы пытаетесь привязать к td, который не существует, когда вы выполняете привязку. Вы можете привязать к столу вместо:

http://jsfiddle.net/TMvN6/

$('#ct').on('click', '.addNewArea', function(event) { 

Answer 2

рабочей демоhttp://jsfiddle.net/Z5Vvc/

Вы можете попробовать и просто прикрепить его к $(document).on( теперь добавляет «+» так далее, и так вперед. Ссылка Doc - довольно писец, чтобы читать, если вы увлечены.

API документ: .on - http://api.jquery.com/on/

Надеется, что это поможет вашей потребность :)

кода

$(document).on('click', '.addNewArea', function(event) {  
    var areaCount = $('#ct tbody tr').length; 
    var newAreaLine = '<tr id="list_items_' + areaCount + '" class="list_item"><td>New Line</td><td><input type="button" name="addNewArea" class="addNewArea button" value="+" /></td></tr>'; 
    $(newAreaLine).appendTo('#ct tbody'); 
    $(this).remove(); 
});