how to get an element added from an ajax response

Question

I have the next code:

$(document).ready(function(){    
$('#dl-cat').mouseenter(function(){
    $.ajax({
        type: "POST",
        url: "../control/Controlador.php",
        data: {lang: $('html').attr('lang'), cat: $(this).text(), prov: "none"},
        success: function(resp) {
            $(".og-grid").html(resp); 
        }
    });       
});

$(".og-grid li").on("mouseenter", function(){
    console.log("it exists");
});

});

Where the "og-grid" class is an "ul" tag and after the ajax response I put some html code like "li" tags, but when I program an event like "mouseenter" to the new added code It does not show me anything, as If It does not exist

Answer 1

You need to use event delegation model of .on() here since the li elements are dynamic

$(".og-grid").on("mouseenter", 'li', function(){
    console.log("it exists");
});

Answer 2

You have to use event selectors. Rewrite your second event-listener as follows:

$(".og-grid").on("mouseenter", "li", function(){
   console.log("it exists");
});

Answer 3

You need to initialize the mouseenter event. Lets say I have a <ul><ul>. After 1 ajax call I have <ul><li><ul>, at this point of time you need to initialize the event on <li>. If you later have 2 <li>'s, you need to again initialize on the newly added one.