将类应用于Ajax加载的内容不起作用

Question

以下是我加载内容的函数：

$("#site-nav .nav1").on('click', function () {
    $(this).addClass("nav-active");
    $('ul.top-level').load('assets/includes/recent.php', function () {
        $(this).show();
    });
    event.preventDefault();
});

该内容加载到ul.top-level中很好。

一旦加载了该内容，我就尝试将一个类应用于新加载的内容中的任何href：

$("ul.top-level li a").on('click', function () {
    alert("hi");
    $(this).addClass("nav-active");
});

这不起作用，警报消息也不起作用。有什么想法吗？

Answer 1

值得注意的是，在哪里应用新的click处理程序，因为在尝试附加它们时，dom很可能还没有准备好。但是，您可能可以使用live()来解决这个问题。

live()适用于所有未来匹配的选择器，因此如果您加载ajax内容，它应该自动将单击处理程序附加到它们上。

$("ul.top-level li a").live('click', function () {
    alert("hi");
    $(this).addClass("nav-active");
});

编辑：由于live()已弃用，您可以使用on()重写live，如下所示：

$(document).on('click', "ul.top-level li a", function () {
    alert("hi");
    $(this).addClass("nav-active");
});