Event not working with dynamically created element

I am pulling my hair, trying to understand why the mouseover event will not work with the .on handler with a dynamically created element from ajax. The only thing that works is the code with .live, but I understand that it is deprecated.

$(".dropdown ul li").live("mouseover", function() {
alert('mouseover works');
});

However, when I try to use .on, it will not work - no matter what options I try (document.ready, .mouseover, etc. etc.)

$(".dropdown ul li").on("mouseover", function() {
alert('mouseover works');
});

Event handlers are at the bottom of the code, so they are executed last. Does anyone have an idea of ​​what I'm doing wrong?

+5
source share
1 answer

.on http://api.jquery.com/on/ - :

$(".static-parent").on("event1 event2", ".dynamic-child", function() {

:

$(".dropdown").on("mouseover", "li", function() {
   alert('mouseover works!!!!!!!!!');
});

, -, . , , , , , . Model-View-Controller, , , . HTML-, , .

, DOM ready

jQuery(function($) { // DOM is now ready and $ alias secured

    $(".dropdown").on("mouseover", "li", function() {
       alert('mouseover works!!!!!!!!!');
    });

});
+21

All Articles