javascript - jQuery/JS : looping function load

Question

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

.load('scandDir.php') 加载新的 <ul><li></li></ul> php 文件中的元素。

问题在于，因为这个脚本是一个循环，所以它执行 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() {
  ...
});

并且仅一次，处理程序将对当前和任何 future 出现在层次结构中的元素起作用。然后在处理程序中只需执行 AJAX 调用并将新数据添加到文档中，信任 jQuery 会为您处理事件。完全摆脱 loadNew 函数，尤其是那里的异常递归。