Не удается контролировать содержимое, добавляемое динамически с помощью .load

Question

У меня есть содержимое, которое я загружаю, используя вызов AJAX и отображая HTML (состоящий из div s и т. Д.) Внутри ul родителя.

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

Я прошел все свои div идентификаторы, чтобы убедиться, что они верны, и они верны. Есть ли способ получить контроль над AJAX-загруженным материалом?

Answer 1

Проблема в том, что ваш код выполняется только с элементами, существовавшими в то время, а не с элементами "future". У вас есть 2 варианта:

1) Повторно запустите код JavaScript "onload" (который был применен к документу, готовому) после загрузки содержимого ajax.

2) Используйте .live() вместо .bind(): Так что поменяй

$('#selector').bind('click', function(){..

К

$('#selector').live('click',function(){..

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

Надеюсь, это поможет. Приветствия

Answer 2

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

Либо заново присоедините обработчики к новому, динамически созданному материалу, либо используйте live или delegate;они «прикрепляют обработчик к событию для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем».

Answer 3

Изменить

$('a#whatever').click(function(){....

На

$('a#whatever').live('click',function(){....

Answer 4

Вам следует либо перепривязать события после загрузки контента, либо использовать

.delegate ( api ), чтобы событие автоматически прикреплялось к вновь загруженным элементам.

что-то вроде:

$("ul#container").delegate("li", "hover", function(){
    doStuff();
});
$("ul#container").delegate("li", "click", function(){
    doOtherStuff();
});