Обработчик событий не работает с динамическим контентом

Question

У меня есть тег A, в котором при нажатии на него добавляется другой тег B, чтобы выполнить действие B по щелчку. Поэтому, когда я нажимаю на тег B, выполняется действие B. Однако метод .on не кажется, работает на динамически созданный тег B.

Мой HTML и JQuery для тега A, как показано ниже:

<a id="address" class="add_address btn btn-inverse btn-medium pull-right push-top">Add Shipping address</a> 

$('.add_address').click(function(){ 
    //Add another <a> 
    $(document).append('<a id="address" class="pull-right update btn btn-inverse btn-medium push-top">Update</a>'); 
}) 

Когда метка B нажата, некоторое действие Б выполнено. Мой jquery выглядит следующим образом:

$('.update').on('click',function(){ 
    //action B 
}); 

У меня есть не динамический контент с классом «.update». В методе .on() выше работает отлично для не динамического содержимого, но не для динамического содержимого.

Как я могу заставить его работать для динамического контента?

Answer 1

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

См http://api.jquery.com/on/#direct-and-delegated-events

Изменить код

$(document.body).on('click', '.update' ,function(){ 

Набор JQuery получает событие, то оно делегирует для элементов, совпадающих селектор заданного в качестве аргумента. Это означает, что вопреки при использовании live элементы набора jQuery должны существовать при выполнении кода.

В этом ответах получает много внимания, вот два дополнительные советует:

1) Когда это возможно, попытаться связать слушатель событий для наиболее точного элемента, чтобы избежать бесполезных обработки событий.

То есть, если вы добавляете элемент класса b к существующему элементу идентификатор a, не используйте

$(document.body).on('click', '#a .b', function(){ 

но использовать

$('#a').on('click', '.b', function(){ 

2) Будьте осторожны, когда вы добавляете элемент с идентификатором, чтобы убедиться, что вы не добавляете его дважды. В HTML не только «незаконно» имеет два элемента с одним и тем же идентификатором, но он ломает много вещей. Например, селектор "#c" будет извлекать только один элемент с этим идентификатором.

Answer 2

Вы пропускаете селектор в функции .on:

.on(eventType, selector, function) 

Этот селектор очень важно!

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

Если новый HTML впрыскивается в страницу, выберите элементы и присоединять обработчики событий после того, как новый HTML помещается на страницу.Или, использовать делегированы события присоединить обработчик события

См jQuery 1.9 .live() is not a function для более подробной информации.