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：循環函數加載

回答

相關問題