Как навесить обработчик jQuery на динамически созданные картинки?

Question

[Алексей Ярков]

Собственно суть в вопросе. Есть скрипт, который делает так:

$(document).ready(function(){
	// вешаем обработчики на наведение курсора на картинку
	$("img")
		.on("mouseover", function(){
			// работаем
		});
});

А как сделать, чтоб для подгруженных картинок AJAX-ом этот обработчик тоже срабатывал?
P.S. Метод live не предлагать (ошибку вызывает в последней jQuery).

Answer 1

[Алексей Уколов]

https://learn.javascript.ru/event-delegation
btw, в описании live() есть инструкции, чем его заменить.
api.jquery.com/on/#direct-and-delegated-events

Comments

[Алексей Ярков]

Идея, но не то. Сделал проще.

[Алексей Уколов]

То, что вы сделали, и есть, мать-его, делегирование! Вы body делегировали обработку!

[Алексей Ярков]

Алексей Уколов: да херню я сделал. Я ж не полный код привел, а то было бы видно, что я затупок. Дело обстоит так. Мне нужно на все картинки на странице добавить обработчик onmouseover и onmouseleave. Для появления кнопки на картинке и удаления соответственно. И все работает. Но когда аджаксом подгружаются картинки, то на новые обработчик и не срабатывает. И кому что делегировать? Как я сделал - это неправильно. Из статьи выше понял, что на mouseover нельзя делегирование юзать. Что посоветуете? Вешать обработчик на load картинки и в нем навешивать на наведение мыши? Матрешка, мать ее какая-то ))) Какое событие срабатывает в момент подгрузки аджаксом?

Если важно, то скрипт будет подключаться к страницам из браузерного расширения.

[Алексей Уколов]

Mouseover просто нужно заменить на mouseenter и всё должно работать нормально.
$('body').on("mouseenter", 'img', function(){});

[Алексей Ярков]

Алексей Уколов: и внутри теперь можно вешать так?

$(this).on("mouseover", function(){
// поработить мир
});

[Алексей Уколов]

Кого вешать? Почему опять mouseover? Где img?

[Алексей Ярков]

Алексей Уколов:https://jsfiddle.net/1wm5Ly9s/5/
что нужно изменить?

[Алексей Уколов]

Замените ваш $('img').on('mouseover') на $('body').on("mouseenter", 'img', function(){});

[Алексей Ярков]

Алексей Уколов: https://jsfiddle.net/1wm5Ly9s/7/
Спасибо огромное!

Answer 2

[Петр]

$('body').on("mouseover", "img", function(){
   ...
});