Разрешить jQuery взаимодействовать с элементами, вызываемыми с помощью .load ()?

Question

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

Answer 1

Вам нужно использовать живую привязку к кнопкам / элементу закрытия.

Вместо использования

$('a.close').click(function() { ... });

Вам нужно использовать

$('a.close').live('click', function() { ... });

http://api.jquery.com/live/

Этот метод является разновидностью базовый метод .bind () для прикрепления обработчики событий для элементов. когда .bind () называется, элементы, которые объект jQuery ссылается на обработчик прилагается; элементы, которые получают введено позже нет, поэтому они будут требуется еще один вызов .bind ().

Answer 2

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

function LeBinding() {
    $('.clickable').click(function() { ... })
}

$('#container').load(url, data, function() {
    LeBinding();
})

Answer 3

Похоже, что элементы, к которым вы привязываете обработчики событий, не существуют в DOM в тот момент, когда вы привязываете обработчики и загружаются после этого через AJAX. Возможно, самый простой способ исправить это - связать обработчики событий после load()? Или даже использовать делегирование событий (использование .live() использует делегирование событий)