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

У меня есть тег 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 выполняется некоторое действие B. Мой jquery выглядит следующим образом:

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

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

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

Ответы

Ответ 1

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

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

Измените свой код на

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

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

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

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

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

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

но используйте

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

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

Ответ 2

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

.on(eventType, selector, function)

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

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

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

См. jQuery 1.9.live() не является функцией для более подробной информации.