jQuery/JS：循环函数加载

现场：http://jonirautiainen.net/code_edit/左边是一个有文件树的面板。jQuery/JS：循环函数加载

.load（'scandDir.php'）从php文件中加载新的<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();

来源

2012-02-29 Joni Juhani Rautiainen

所以......有什么问题吗？ – hayavuk 2012-02-29 20:35:18

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

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

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

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

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

来源

2012-02-29 20:40:11 Amadan

WOW。谢谢！这有效...... – 2012-02-29 21:13:48

你可能只是需要添加一些参数到“loadNew（）”，所以它确切地知道该做什么，而不是重复自己。

来源

2012-02-29 20:39:41

它看起来像我每次点击一个.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以及现有元素的所有元素。

来源

2012-02-29 20:41:19 Jivings

'.delegate（）'被弃用，赞成'.on（）'。否则，就在。 – Amadan 2012-02-29 20:50:16

Gotcha。编辑。 – Jivings 2012-02-29 21:21:27

您每次调用loadNew函数都会绑定一个新的点击处理函数到$（“。file-tree a”）。

1次点击，一次加载，3次点击。3次加载处理程序，3次加载。将点击处理程序委托给列表的父项。

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

编辑：将需要loadNew的一些格式化，你可以通过"this"进入新的负荷作为参数，让你可以从元素的所有变量点击

来源

2012-02-29 20:43:42 charlietfl

jQuery/JS：循环函数加载

回答

相关问题