jQuery и подгруженные DOM элементы
Представим, что у Вас есть на странице ссылки или элементы с одним классом .class. Вы используете jQuery для обработки события click. Например, так:
$('.class').click(function(e) {
e.preventDefault();
alert("click!");
});
Как только Вы совершите клик по объекту с классом .class, то получите сообщение alert.
Однако, если попробовать подгрузить на эту же страницу элементы DOM с тем же классом (любым методом, например $.ajax({})), то при клике на них Вы ничего не получите. Они не будут обрабатываться. Это и логично, ведь мы не знали о них, когда страница загружалась.
Как же быть тогда? Для этого существует метод live у jQuery. Метод привязывает обработчик к событию для всех элементов, включая будущих. В случае с нашим примером, его необходимо использовать так:
$('.class').live('click', function () {
e.preventDefault();
alert("click!");
});
Все! После этого все события будут обрабатываться.
(7 votes, average: 4,43 из 5)
Loading ...makecode о 12 Сентябрь, 2010
5 Комментариев
Loading ...
5 Комментариев на «jQuery и подгруженные DOM элементы»
А как быть с событием hover(); ???
Ответить
makecode Ответил:
Декабрь 25th, 2011 at 02:10
Ответить
Ответил:
Декабрь 25th, 2011 at 02:33
Спасибо, но у меня ещё вот такая задачка! все ссылки на удаление скрыты, и появляются только при наведении — hover(); как мне воспользоваться live(); для того, чтобы подгруженный контент был спрятан — hide();
Ответить
Ответил:
Декабрь 25th, 2011 at 02:36
точнее, чтобы у подгруженного контента ссылки на удаление были спрятаны!
Ответить
makecode Ответил:
Декабрь 25th, 2011 at 02:58
Изначально делаете им всем display:none с помощью CSS.
При наведении на контейнер определяете его, например так
var c = $(this)
Потом можете через id найти Ваши кнопки на удаление, например если у контейнера id=»container-25″ а у кнопок на удаление id=»delete-25″, то определяете id контейнера, потом делите его по дефису и скрываете кнопки, типа так:
var id = c.split(«-»);
$(«#delete-».id[1]).hide();
и соответственно
$(«#delete-».id[1]).show();
А можно просто с помощью parent. Как угодно.
Ответить