Миграция из .live() в .on()

Question

У меня есть небольшой код, отвечающий за добавление новых комментариев. Проблема заключается в том, когда я переписал код, чтобы использовать on вместо удалены live, мой код не работает на новых элементах, которые были добавлены после загрузки страницы

Вот мой код

$(function(){ 
    $('.show-comment-form').on("click", (function(){ 
     dataattr = $(this).data('comment'); 
     $('#new_comment').remove(); 
     $('.message-'+dataattr).append(partial_form); 
     $("#comment_parent_id").val(dataattr); 
     return false; 
    })) 
}) 

HTML

<a href="/phrases/52/create_comment?parent_id=16" class="show-comment-form" data-comment="16">Reply</a> 

Как добавить событие click ко всем будущим элементам, которые будут добавлены после загрузки страницы?

Answer 1

Изменение:

$('.show-comment-form').on("click", (function(){ 

к:

$(document).on("click", '.show-comment-form', (function(){ 

При добавлении элементов динамически, чтобы использовать на вас целевой элемент, который существует на странице уже в этом примере document, то вы проходите элемент, который вы хотите подключить слушателя к параметру .on().

Обработчики событий привязаны только к выбранным в данный момент элементам; они должны существовать на странице в то время, когда ваш код делает звонок .on(). Чтобы убедиться, что элементы присутствуют и могут быть выбраны, выполните событие , связанное внутри документа, готового обработчика для элементов, которые находятся в HTML-разметке на странице. Если на страницу вводится новый HTML-код, выбирает элементы и присоединяет обработчики событий после того, как новый HTML-код помещается на страницу.

отметить также, что вы хотите целевой элемент как можно ближе к динамически вставленные элементы, как это возможно:

Прикрепление большого количества делегированных обработчиков событий в верхней части дерева документа может привести к снижению производительности. Каждый раз, когда происходит событие, jQuery должен сравнить все селекторы всех вложенных событий этого типа с каждым элементом в пути от целевой цели до вершины документа . Для обеспечения максимальной производительности присоедините делегированные события в документе местоположение как можно ближе к целевым элементам. Избегайте чрезмерного использования document или document.body для делегированных событий на большом документов.