JQuery.Hover not working for dynamic element

Here is my code

$(".inboxfeedlist li").hover(function(e){alert('');} 

This does not work for dynamically created elements, even if I use

 $(".inboxfeedlist li").bind('hover',function(){}) 

also does not work, what is the problem with the code.

+4
source share
8 answers

Use the live method:

 $(".inboxfeedlist li").live('hover', function(e){alert('');}); 

Hover subscription performs two callback functions, you mean mouseover

+3
source

live become deprecated in jQuery 1.9. We can use on with mouseenter and mouseleave :

 $(document).on("mouseenter", ".save-btn", function(e) { $(this).css("background-image","url('ie/imgs/btn/hover-btn.png')"); $(this).find("a").css("background-image","url('ie/imgs/btn/hover-btn-left.png')"); }); $(document).on("mouseleave", ".save-btn", function(e) { $(this).css("background-image","url('ie/imgs/btn/btn.png')"); $(this).find("a").css("background-image","url('ie/imgs/btn/btn-left.png')"); }); 

For some reason, I cannot use hover with on . It just doesn't work. But, from what I read, hovering is just an adaptation from mouseenter and mouseleave, so that's fine. ( fooobar.com/questions/428475 / ... )

If you do not need to support IE6, I recommend using :hover on your CSS (if this change is only in CSS, as the example above).

+32
source

try live

 $(".inboxfeedlist li").live('hover',function(){}); 
+3
source

Use delegate or live to bind events. This ensures that everything added dynamically will be associated with an event handler.

+1
source

It looks like you need live or delegate . Delegate prefers

 $(document.body).delegate(".inboxfeedlist li", "hover", function(){ alert(''); }); 
+1
source
 $('.inboxfeedlist li').live('hover', function(e) { alert(''); }); 

jQuery live

jQuery delegate

0
source

You can use something like this:

 $(document).on('mouseover','div.cover-wrapper',function(){ $(this).css({'border':'1px solid #000'}); }); $(document).on('mouseout','div.cover-wrapper',function(){ $(this).css({'border':'none'}); }); 
0
source

Here are the uses and details of these features

http://api.jquery.com/live/

$ (selector) .live (events, data, handler); // jQuery 1.3+

$ (document) .delegate (selector, events, data, handler); // jQuery 1.4. 3+

$ (document) .on (events, selector, data, handler); // jQuery 1.7+

0
source

Source: https://habr.com/ru/post/1379209/


All Articles