為什么通過ajax加載數據后，我的JQuery代碼不起作用？

Question

我有這個jQuery代碼樹視圖：

$(".treeView").on("click", ".CollOpen, .CollClosed", function () {
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});

頁面加載后，它可以正常工作。 當樹狀視圖被更改然后再用Ajax加載時，它不起作用（我對打開和關閉的子項使用+和-，但是當我單擊+或-發生任何事情時）。 如果我刷新頁面，它將再次正常工作。 為什么呢？

請問你能幫幫我嗎 ？

Answer 1

嘗試使用body標簽代替動態修改的.treeview ：

$("body").on("click", ".CollOpen, .CollClosed", function () {
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});

Answer 2

根據顯示的內容，如果要替換 .treeview元素，則不會設置任何處理程序來處理新的替換.treeview元素。

如果是這樣，您可以將事件掛接到樹視圖的容器上，基本上是第一個不會被替換的元素。 例如：

$(".treeview_container_that_stays_put").on("click", ".treeView .CollOpen, .treeView .CollClosed", function () {
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});

您甚至可以使用$(document.body).on(... ，但是通常有一個不變的容器，它比您要使用的容器更接近。