ajax - 如何从 ajax 响应中获取添加的元素

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响应之后我放了一些像“li”标签这样的html代码，但是当我将一个像“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>，则需要再次对新添加的进行初始化。