How to bind .hover() to dynamically created “li” elemtent? [duplicate]

Answer 1

The "hover" event has been deprecated with delegated event handling such as .on() per the .on() jQuery doc pages.

Instead, you need to use .on() delegated event handling with mouseenter and mouseleave and an event handler for each.

For example:

$(document).on("mouseenter", "li", function() {
    // hover starts code here
});

$(document).on("mouseleave", "li", function() {
    // hover ends code here
});

In your real code, you would select a static parent object that is much closer to the dynamic li tags than the document object for better performance.

Answer 2

Use JQuery On Try this :

$(document).on('hover', 'li', function () {

});

Answer 3

Try this

Edit: Sry missed the deprecated event

$(document).on("mouseenter", "li", function(){
       //Your code
});

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

fiddle