Как я могу гарантировать, что JavaScript, вставленный через AJAX, будет выполнен после того, как сопровождающий HTML (также полученный через AJAX) будет готов в DOM?

Question

У меня есть части страниц, заменяемые на HTML, полученные с помощью вызовов AJAX. Некоторый HTML-код имеет JavaScript, который необходимо запустить один раз, чтобы инициализировать сопровождающий HTML-код (настройка обработчиков событий).

Поскольку документ уже загружен, когда я заменяю фрагменты HTML с помощью функции jQuery .html, наличие jQuery(document).ready(function() {...}); не выполняется, поскольку страница загружена задолго до этого, и это всего лишь фрагмент HTML, который заменяется. 1005 *

Какой лучший способ прикрепить обработчики событий, чей код упакован вместе с интересующим его HTML, когда этот контент загружается через AJAX? Должен ли я просто поместить процедурный блок javascript после HTML, чтобы при вставке нового блока HTML jQuery немедленно выполнял javascript? Действительно ли HTML-код определен в DOM и готов к работе с JavaScript, который находится в том же .html вызове?

Answer 1

Некоторые события могут быть связаны с текущими и будущими элементами с помощью .live () http://api.jquery.com/live/:

$('.button').live('click', function() {
  // do something.
});

.live () имеет некоторые ограничения (см. Связанную документацию):

• Не работает на родном DOM элементы, так что $ ('table'). live ('click', функция () {}); не сработает.
• Это не может быть приковано как $ ( 'Somediv '). Следующий (). Жить (' щелчок', функция () {}); не сработает.

Метод .delegate () должен устранить эти ограничения, но я понимаю, что он имеет свои собственные ограничения. Я на самом деле еще не использовал это ... не нужно. Из документации:

Делегат является альтернативой использованию метод .live (), позволяющий привязка делегирования события к конкретные элементы DOM.

Вы также можете связать новые события в функциях AJAX success / error / complete в JQuery:

$.ajax({
  url: 'something.html',
  success: function(data) {
    //add new elements with data.
    //bind new events to elements
  }
});

Answer 2

jQuery.live есть для этой ситуации.