Как сделать live click событие на новом добавленном DOM

Question

Я - пользователь live(), и я знаю, как-то live() устарел. Я попытался использовать bind(), чтобы событие на новом добавленном dom работало, но это не так.

не могли бы вы рассказать мне, как сделать bind() правильно? или есть ли другой метод для выполнения этой задачи?

это HTML:

<table> 
    <tr> 
     <td> hi there <span class="click">click me</span></td> 
    <tr> 
    <tr> 
     <td> hi there2 <span class="click">click me</span></td> 
    <tr> 
    <tr class="end"> 
     <td></td> 
    </tr> 
</table> 
<button class="add_new">add new row</button> 

это является ЯШ:

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>'; 

$('.add_new').click(function() { 
    $('.end').before(new_row);  
}); 


$('.click').bind('click', function() { 
    alert('clicked'); 
}); 

, если это возможно, я хочу использовать метод родной Jquery, а не плагины. это мой jsfiddle http://jsfiddle.net/bondythegreat/z3uXH/

Answer 1

Вы должны использовать динамическую версию .on() JQuery или .delegate().

$('table').on('click', '.click', function() { 
    // your code here 
}); 

Для динамического поведения с использованием делегированных обработки событий, основная идея заключается в том, что первый выбор (в объекте JQuery) должен быть статический родительский объект, который не динамически созданный после установки обработчика событий. Второй селектор, который передается как второй аргумент в .on(), является селектором, который соответствует определенному элементу, в который вы хотите включить обработчик события. Эти элементы могут динамически создаваться после установки обработчика событий.

Используя .click() или .bind(), вы получаете статические обработчики событий, которые работают только с объектами, которые присутствуют во время запуска кода.

Чтобы сделать этот код более надежным, я бы предложил две вещи. Во-первых, не используйте имя класса, например «щелчок», который очень легко путать с событием. Во-вторых, поместите идентификатор в таблицу, чтобы идентификатор мог ссылаться на первый селектор, а не на общий код "table", который может быть случайно включен в другие таблицы на вашей странице.

Answer 2

Вы должны использовать JQuery-х on() method

Как so:

$('table').on('click', '.click', function() { 
    alert('clicked'); 
}); 

Answer 3

Начиная с jQuery 1.7+ live() заменяется на on(). В страницах документа для live() есть руководство по обновлению до более новых методов.

В вашем случае, что бы перевести:

$('table').on('click','.click', function() { 
    alert('clicked'); 
}); 

Обнаружили altered & working fiddle