Кнопки на внешних загружаемых HTML-файлах не будут работать

Question

Я использую AJAX для загрузки html-файлов. В каждом html-файле есть голосование и проголосовать.

Сценарий, который запускает эти две кнопки, находится в функции document.ready в главном (индексном) html-файле.

Когда я непосредственно вставляю html в основной файл, работает функция document.ready. Но когда я загружаю файлы html ajax, содержимое функции document.ready не будет запущено.

Что я делаю неправильно?

Answer 1

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

Вам необходимо использовать либо в прямом эфире, либо на.

, например:

$('#buttonLoadedUsingAjax').live('click', function() {}); 

или если вы используете JQuery> 1,7:

$(document).on("click", "#buttonLoadedUsingAjax", function(){ }); 

Answer 2

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

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

Если вы используете jQuery, вы можете использовать его метод on().

Answer 3

Когда вы загружаете их с помощью Ajax, функция имеет уже run. Нет ничего, что могло бы заставить его работать снова.

Используйте event delegation вместо привязки обработчиков событий непосредственно к элементам.