Как применить события к динамически загружаемым узлам DOM с помощью JQuery?

Question

Я использую AHAH для загрузки фрагмента HTML после того, как документ готов.В этом фрагменте HTML есть кнопка, к которой я хотел бы применить событие .click.У меня проблемы с применением этого события после загрузки HTML.Обратный вызов очень общий и используется другими частями страницы, поэтому я бы предпочел не заполнять его конкретным кодом.Есть идеи?

Answer 1

Изучите использование метода .live (): http://api.jquery.com/live/

Answer 2

Это то, для чего был создан метод live.

Лучше всего либо использовать его, либо добавить прослушиватель событий к своему содержаниюэлемент (или даже body).Live отлично подходит для событий, которые всплывают.Слушатели событий - это решение для тех, кто этого не делает.

Answer 3

Как отмечают другие, вы должны рассмотреть возможность использования $.live(), который будет обрабатывать события для всех ранее существующих элементов DOM, а также для любых добавленных позже в будущем. Например, предположим, что блок HTML, в который вы загружаете, содержит набор ссылок, содержащих имя класса «foo», все из которых должны реагировать определенным образом при нажатии:

$(".foo").click(function(){
  // I don't do anything to dynamicall-added elements
});

Этот пример будет применяться только к уже существующим элементам, содержащим имя класса "foo". Чтобы обработать текущие и будущие элементы, мы должны сделать следующее:

$(".foo").live("click", function(){
  // I handle both present, and future elements
});

Теперь все добавленное в любое время будет обрабатываться этим, если оно содержит имя класса "foo". Это прекрасно работает в ситуациях, подобных вашей, когда большие блоки html будут вставлены в DOM позже в жизненном цикле страницы.

Answer 4

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

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

callToAGenericService({url: '...', target: someId, callback: function myCustomCallBack (xhr) {
   console.log('Custom callback');
   console.dir(xhr);
}});

, и универсальный обратный вызов универсального сервиса был изменен, чтобы быть чем-то вроде этого:

function genericServiceCallback(options,xhr) {
   //Do the 'generic processing' of the request

   // if calling code specified a custom callback, execute it
   if (options.callback) {
      options.callback(options,xhr);
   }
}

Это было, очевидно, намного более изощренным (обработка ошибок и областей действия в основном) но дает представление.

Answer 5

Я думаю, вам придется использовать живой * метод вместо того, чтобы реагировать на динамически загружаемый контент.