Using .on for dynamically generated elements $(document).on jQuery

This is an issue that usually beginner would encounter when things like .hover and .click did not work with dynamically generated elements.

To resolve the issue, instead of using, $(document).on(“click”, “element_selector”, function() should be used for live contents. Note that the .hover takes two callback functions, in order to achieve the same effect, mouseenter and mouseleave events should be put in when using $(document).on in this case.

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

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




Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.