jquery - 新内容不匹配

Question

我正在通过 AJAX 加载一些内容并尝试添加一些功能，我有这段代码来显示/隐藏一些内容：

$('.list li').hover(
            function() { $('.detail').show(); }, 
            function() { $('.detail').hide(); }
        );

这在第一次加载时工作正常，但在通过 AJAX 加载更多内容时不起作用。任何想法如何解决它？

Answer 1

$('.list')仅构造当前存在的“.list”项目的列表。

您必须使用on向尚不存在的元素添加事件处理程序。

你可以这样做 ：

$('body').on('mousenter', '.list li', function({ $('.detail').show()});
$('body').on('mouseleave', '.list li', function({ $('.detail').hide()});

Answer 2

使用.on您可以将事件委托给.list元素，以便添加新li元素不会破坏预期的功能。

$(".list").on("mouseenter mouseleave", "li", function(e){
    $(".detail").toggle( e.type === "mouseenter" );
});

小提琴：http: //jsfiddle.net/NGEfj/

如果.detail元素在 中li，而不是在页面中的其他位置：

$(".list").on("mouseenter mouseleave", "li", function(e){
    $(".detail", this).toggle( e.type === "mouseenter" );
});

小提琴：http: //jsfiddle.net/NGEfj/1/