为什么通过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(... ，但是通常有一个不变的容器，它比您要使用的容器更接近。