Как вы заставляете jQuery связывать события с элементами, загруженными через Ajax?

Question

Я использую функцию .load () для загрузки раздела html, который имеет некоторую функциональность jQuery, связанную с определенным классом. = /

мысли

Answer 1

Использование живых событий:

$('.className').live(function(event) {
   ...
}

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

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

Answer 2

Если вы используете событие щелчка, это будет ваш синтаксис:

   $('a.myClass').live("click", function() {

        // do something here

    });

Answer 3

Вам необходимо использовать живую функцию JQuery . Это позволяет вам:

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

Answer 4

Вы можете использовать функцию on () .

Вот так:

$(".existingElement").on('click', '.addedByAjax .className', function(){
  // ... do whatever
}

Обратите внимание, что существующий элемент должен существовать в тот момент, когда этот фрагмент кода будет запущен. Таким образом, вам всегда нужно привязать элемент, к которому вы собираетесь загружать вещи с помощью ajax в , и использовать второй селектор (тот, что в функции on ()), чтобы соответствовать тому, что добавлено.

Answer 5

Вы должны вручную связать события после установки HTML.

$.post('ajax/test.html', function(data) {
  $('.result').html(data);
  $('.result a').click(function() {
    alert('click');
  });
});

Кроме того, вы можете использовать live , чтобы помочь с этим.