Почему не работает событие при наведении?

Question

[Max Ba]

Есть динамичная подгрузка товаров. Нужно, чтобы при наведении на подгруженные товары, срабатывало событие. В данном случае нужно, чтоб при наведении на товар, всплывал блок со скидкой, а при потере наведения, исчезал. Первый пример работает как надо. Но из-за подгрузки товаров использую второй способ. А вот он не работает.

//Работает
$(".product").hover(function(){
	$(this).append('<span class="sale"></span>');
},function(){
	 $(".sale").remove();
});

// НЕ работает
$(document).on("hover", ".product", function(){
	$(this).append('<span class="sale"></span>');
},function(){
	 $(".sale").remove();
});

Comments

[Сергей Тутуков]

$( ".product").on("mouseenter", function(){
  $(this).append('<span class="sale"></span>');
}).on("mouseleave", function(){
   $(".sale").remove();
});

или как у тебя, делегированное событие

$(document).on("mouseenter", ".product", function(){
  $(this).append('<span class="sale"></span>');
}).on("mouseleave", ".product", function(){
   $(".sale").remove();
});

[Max Ba]

Большое спасибо за решение.

Answer 1

[justdealman]

Используйте 'mouseenter', чтобы показать блок и 'mouseleave', чтобы скрыть.