Как прикрепить события к динамическим HTML-элементам с помощью jQuery?

Я добавляю новый ответ, чтобы отразить изменения в более поздних выпусках jQuery. Метод .live () устарел с jQuery 1.7.

С http://api.jquery.com/live/

Начиная с jQuery 1.7, метод .live () устарел. Используйте .on () для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate () вместо .live ().

Для jQuery 1.7+ вы можете прикрепить обработчик событий к родительскому элементу с помощью .on () и передать селектор a в сочетании с myclass в качестве аргумента.

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

Так что вместо ...

$(".myclass").click( function() {
    // do something
});

Ты можешь написать...

$('body').on('click', 'a.myclass', function() {
    // do something
});

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

Тег body используется здесь, поскольку в примере не было более близкого статического окружающего тега, но любой родительский тег, существующий при вызове метода .on, будет работать. Например, тег ul для списка, в который будут добавлены динамические элементы, будет выглядеть так:

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

Пока существует тег ul, это будет работать (элементы li еще не нужны).

Иногда этого (ответ, получивший наибольшее количество голосов) не всегда достаточно:

$('body').on('click', 'a.myclass', function() {
    // do something
});

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

Например:

function RefreshSomeEventListener() {
    // Remove handler from existing elements
    $("#wrapper .specific-selector").off(); 

    // Re-add event handler for all matching elements
    $("#wrapper .specific-selector").on("click", function() {
        // Handle event.
    }
}

Поскольку это функция, всякий раз, когда я настраиваю свой слушатель таким образом, я обычно вызываю ее, когда документ готов:

$(document).ready(function() {
    // Other ready commands / code

    // Call our function to setup initial listening
    RefreshSomeEventListener();
});

Затем, когда вы добавляете какой-либо динамически добавляемый элемент, снова вызывайте этот метод:

function SomeMethodThatAddsElement() {
    // Some code / AJAX / whatever.. Adding element dynamically

    // Refresh our listener, so the new element is taken into account
    RefreshSomeEventListener();
}

Надеюсь, это поможет!

С уважением,

После jQuery 1.7 предпочтительными методами являются .on () и . off ()

Ответ Шона показывает пример.

Устарело:

Используйте функции jQuery .live() и _ 2_. Доступно в jQuery 1.3.x

Из документов:

Чтобы отображать текст каждого абзаца в окне предупреждения при каждом щелчке:

$("p").live("click", function(){
  alert( $(this).text() );
});

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

Если вы добавляете к DOM кучу якорей, лучше изучите делегирование событий.

Вот простой пример:

$('#somecontainer').click(function(e) {   
  var $target = $(e.target);   
  if ($target.hasClass("myclass")) {
    // do something
  }
});

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

$(document).bind('click', function (e) {
   var target = $(e.target);
   if (target.is('.myclass')) {
      e.preventDefault(); // if you want to cancel the event flow
      // do something
   } else if (target.is('.myotherclass')) {
      e.preventDefault();
      // do something else
   }
});

Пользуюсь им какое-то время. Работает как шарм.

В jQuery 1.7 и новее рекомендуется использовать .on() вместо привязки или любого другого метода делегирования событий, но .bind() по-прежнему работает.

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

текст ссылки

$(function(){
    $(".myclass").live("click", function() {
        // do something
    });
});

Если вы используете jQuery 1.3+, используйте. live ()

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

Вы хотите использовать функцию live(). См. документы.

Например:

$("#anchor1").live("click", function() {
    $("#anchor1").append('<a class="myclass" href="#">test4</a>');
});