Как правильно добавить события к динамически создаваемым элементам?

shc345

Исользую jquery. Мне нужно сделать, чтобы при наведении на любую ссылку в документе, отображалось бы - alert("ссылка"). Изначально, в документе, у меня уже есть одна ссылка - <a>Первая</a>. Для неё я при загрузке добавляю событие - $("a").hover(function(e) {alert("ссылка"); }). Далее при наведение на эту ссылку событие отрабатывает нормально. Но после добавлении ссылок динамически (событие - $("a").click) на новых ссылках событие не срабатывает.

Код страницы:

<title>Nexus</title> <a>Первая</a>

Подскажите, пожалуйста, как сделать, чтобы событие $("a").hover отрабатывало на все ссылки, в том числе и динамически, в том числе и на добавленные после загрузки документа?

3 ответа

shc345

@vvtvvtvvt, по сути, вам уже ответил @artem328, но только он почему-то поленился рассказать, что для динамических элементов используется делегированная обработка собятий, и схематически это выглядит так:

$('parent_static').on('event', 'children_dinamic', handler);

Где parent_static - это статичный родительский элемент (лучше ближайший, но подойдёт и body), event - событие, children_dinamic - дочерний динамический элемент, на котором обработчик и должен сработать. При этом указатель this или объект jQuery $(this) в обработчике - имено дочерний динамический элемент.


shc345

Вы привязываете события к ссылкам только при загрузке страницы, когда только одна ссылка существует. Решением будет привязывать события каждый раз, когда добавляется ссылка.

<title>Nexus</title> <a onclick="clck()" onmouseover="hover()">Первая</a>

jsFiddle

licensed under cc by-sa 3.0 with attribution.