как получить элемент, добавленный из АЯКС ответа

Question

У меня есть следующий код:

$(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"); 
}); 

});

Где класс «og-grid» является тегом «ul», и после ответа ajax я помещаю некоторый код html как теги «li», но когда я программирую событие, такое как «mouseenter», на новый добавленный код. не показывает мне что-нибудь, как если бы оно не существует

Answer 1

Вы должны использовать модель делегирования события .on() здесь, так как li элементов являются динамическими

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

Answer 2

Вы должны использовать селекторы событий. Перепишите свой второй прослушиватель событий следующим образом:

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

Answer 3

Необходимо инициализировать событие mouseenter. Допустим, у меня есть <ul><ul>. После 1 ajax-вызова у меня есть <ul><li><ul>, в этот момент вам нужно инициализировать событие на <li>. Если у вас есть 2 <li>, вам нужно снова инициализировать новый добавленный.