將類應用於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處理程序應用於何處，因為當您嘗試附加新的click處理程序時，很有可能dom尚未准備就緒。 但是，您可以通過使用live()來解決此問題。

live()適用於所有將來匹配的選擇器，因此，如果加載ajax內容，則應將點擊處理程序自動附加到它們。

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

編輯：由於不推薦使用live() ，因此可以使用on()代替live來重寫live：

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