Почему обработчики событий jQuery не работают с измененными элементами DOM?

Question

В моем приложении есть раскрывающаяся форма, которая запускает запрос на обмен AJAX и возвращает выбранное значение имени пользователя с изображением «delete» рядом с ним.

<div id="el">User Name <img src="ico/del.gif" onclick="ajax_delete(12)" class="del" /></div>

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

$("img.del").css('cursor', 'pointer');

НО, если приведенный выше html-код добавляется запросом AJAX следующим образом:

$("#el").html('User Name <img src="ico/del.gif" onclick="ajax_delete(12)" class="del" />');

изменение указателя мыши не работает для изображений, добавленных запросом AJAX.

Любая подсказка, почему?

Answer 1

Элемент не существовал на момент запуска функции css. Вы должны запустить функцию css после ее добавления в DOM.

Из живой документации:

.live не поддерживает обратный вызов в стиле без событий для liveQuery обеспечивает. Только обработчики событий могут быть связано с .live.

Для этого вам понадобится подключаемый модуль liveQuery .

Оттуда довольно просто:

$('#el').livequery(function() {
  $(this).css('background', 'green');
});

Обратите внимание, что liveQuery также может запускаться для элементов, которые были удалены или более не совпадают (например, если вы сопоставляете на основе сравнения значений), используя второй параметр:

UnmatchedFn запускается при изменении элемента и больше не сопоставлены или удалены из DOM.

Nice.

Answer 2

$ ("img.del") возвращает набор выбора всех изображений , находящихся в данный момент в документе с ClassName, равным del. Вы вставляете новый элемент сразу после вызова этой команды. Поэтому вам нужно будет использовать живые события

Answer 3

Вам нужно использовать живые события.

http://docs.jquery.com/Events/live

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

Answer 4

Может быть, обработчик live () поможет вам. Читайте об этом в документации.