Question

现场：http://jonirautiainen.net/code_edit/左边是一个有文件树的面板。

.load（'scandDir.php'）从php-file加载新的<ul><li></li></ul>元素。

问题是因为这个脚本是一个循环它执行loadNew（）;多次。请在前面提到的页面上检查问题。单击这些文件夹打开它们，您将看到这些文件多次显示。

脚本需要循环，因为.load是异步的。 $(".file-tree a").on(不允许我选择执行.load。

创建的新元素

还有其他办法吗？

    function loadNew()
    {
        $(".file-tree a").on("click",function ()
        {
                var path = $(this).attr("title");
                var folder = $(this).text();
                var name = $(this).attr("name");
                var id = $(this).parent().attr("id");
                $("#testi").html(path + folder + name + id);
                var liHtml = $(this).parent().html();               
                    if(liHtml.match(/<ul /))
                    {           

                    }else
                    {
                        if(name=="dir")
                        {
                            $("#hiddenDiv1").load("scanDir.php?path=" + path + "/" + folder, function() {
                              var hiddenDiv = $("#hiddenDiv1").html();
                                $("#" + id).append(hiddenDiv); 
                                loadNew();
                            });
                        }
                    }

        });
    }
    loadNew();

Answer 1

您不断堆放新的点击处理程序。我知道你正在加载新元素，他们也需要处理他们的事件，但是在这个过程中你要为现有元素添加更多的处理程序。因此，在展开多个目录之后，旧元素将在它们上面有几个处理程序;当你点击它们时，所有这些处理程序都会被调用（这会获得额外的元素）。

一种方法是注意添加点击处理程序的内容。只将它添加到新加载的元素中。

另一种更简单的方法是利用jQuery的on()方法的强大功能。如果你这样写：

$('#fileNavi').on('click', '.file-tree a', function() {
  ...
});

和只有，处理程序将适用于层次结构中出现的当前和任何将来的元素。然后在处理程序内部执行AJAX调用并将新数据添加到文档中，信任jQuery以便为您处理事件。完全摆脱loadNew函数，特别是你去那里的异常递归。

Answer 2

在我看来，每次点击.file-tree链接时，它都会将新的click处理程序附加到所有.file-tree元素。您只想附加到新元素。所以也许改成这样的东西：

var expand = function() {
                var path = $(this).attr("title");
                var folder = $(this).text();
                var name = $(this).attr("name");
                var id = $(this).parent().attr("id");
                $("#testi").html(path + folder + name + id);
                var liHtml = $(this).parent().html();               
                    if(liHtml.match(/<ul /))   {           

                    }
                    else
                    {
                        if(name=="dir")
                        {
                            $("#hiddenDiv1").load("scanDir.php?path=" + path + "/" + folder, function() {
                               var hiddenDiv = $("#hiddenDiv1").html();
                               $("#" + id).append(hiddenDiv); 
                            });
                        }
                    }

};
$('#fileNavi').on('click', '.file-tree a', expand);

编辑：

on将影响添加到DOM以及现有元素的所有元素。

Answer 3

每次调用时，loadNew函数都会将新的单击处理程序绑定到$（“。file-tree a”）。

单击，一次加载，三次单击.. 3个clcik处理程序，3个加载。将单击处理程序委派给列表的父级。

$("#fileNavi ").on("click",'.file-tree a',function ()
  loadNew();
})

编辑：需要重新格式化loadNew，你可以将"this"传递给load new作为参数，这样你就可以从点击的元素中获取所有变量

Answer 4

你可能只需要在“loadNew（）”中添加一些参数，这样它就可以确切知道该做什么而不会重复。

jQuery / JS：循环函数加载

4 个答案: