为什么我的JQuery代码在通过ajax加载数据后无法正常工作？

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元素，则不会设置任何处理程序来处理新的替换{{1元素。

如果是这种情况，您可以将事件挂钩到树视图的容器上，基本上是第一个没有被替换的元素。 E.g：

.treeview

你甚至可以使用$(".treeview_container_that_stays_put").on("click", ".treeView .CollOpen, .treeView .CollClosed", function () { $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle(); }); ，但通常会有一个不变的容器，更接近你正在使用的容器。