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

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

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