Как добавить события в элементы, добавленные AJAX?

Question

я загрузить некоторый HTML с использованием AJAX, это работает отлично, один из бит, которые загружают является контактной формой, которую я пытаюсь перехватить представить событие, используя

$(document).ready(function() {  
    $('contact_form').submit(function() { 
     return false; 
    });  
}); 

выше Javascript загружаются с начальной загрузкой страницы ,

Однако, когда я посещаю страницу и отправляю форму, она следует по умолчанию и следует за регулярным представлением (которое работает, но это мой маршрут совместимости, отличный от javascript, который я хочу, чтобы большинство пользователей не следовали). Я пробовал тестирование .click() событий на битах страницы, которые изначально загружены, и аналогичных битов, которые загружаются с использованием AJAX, в результате только те элементы, которые были первоначально загружены страницей, выполняют событие .click().

Я предполагаю, что это факт, что я загружаю код jQuery перед добавлением элементов в DOM (у меня есть теги , которые загружаются с начальной загрузкой страницы), и это не требует перезагрузки слушателей (дикая думаю, на самом деле у меня нет подсказки).

Правильно ли в моем предположении? И какое лучшее решение?

Answer 1

Прежде всего contact_form не действительный селектор, так как он ищет элемент <contact_form>. Он должен быть #contact_form для выбора по id, или .contact_form для выбора по классу.

Во-вторых, ваше предположение о обработчиках событий верное, обработчики событий ярлыка (click, submit и т. Д.) Работают только с элементами, доступными в DOM при загрузке страницы.

Если элемент добавляется в DOM после загрузки страницы вы должны использовать delegate() или on() (в jQ1.7 +), чтобы добавить события к этому элементу (например, с помощью AJAX.):

$('body').delegate("#contact_form", "submit", function() { 
    return false; 
)}; 

Или :

$('body').on("submit", "#contact_form", function() { 
    return false; 
)}; 

Я использовал body в качестве родительского селектора здесь, но вы должны использовать ближайший статический элемент (то есть один, который доступен в DOM на странице загрузки) на тот, который вы размещаете мероприятие.