jQuery/JS：ループ関数ロード

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

新しいクリックハンドラーに積み重なっています。私はあなたが新しい要素を読み込んでおり、イベントを処理する必要があることを理解していますが、その過程で既存の要素にハンドラを追加しています。だから、いくつかのディレクトリを展開した後、古い要素にはハンドラがいくつかあります。これらのボタンをクリックすると、それらのハンドラがすべて呼び出されます（追加要素が得られます）。

1つのアプローチは、クリックハンドラを追加するために気を付けることです。新しくロードされた要素にのみ追加します。

さらに簡単な方法は、jQueryのon()メソッドの機能を利用することです。あなたはこのようにそれを記述する場合：一度だけ

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

と、ハンドラが現在とあなたの階層に表示されるすべての将来要素のために動作します。次に、ハンドラの内部でAJAX呼び出しを行い、新しいデータをドキュメントに追加します。jQueryを信頼してイベントを処理します。 loadNew機能を完全に取り除いてください。特に、あなたがそこに行っている逸脱した再帰があります。

Answer 2

「loadNewを（）」それは自分自身を繰り返して行うとしないことを正確に知っているので。

Answer 3

.file-treeリンクがクリックされるたびに、.file-tree要素のすべてに新しいclickハンドラが追加されるように見えます。新しい要素にアタッチするだけです。だから、おそらくこのようなものに変更します。

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); 

EDIT：

onは、DOMだけでなく、既存の要素に追加されたすべての要素に影響します。

Answer 4

loadNew関数は、呼び出すたびに新しいクリックハンドラーを$（ "。ファイルツリーa"）にバインドしています。

1クリック、1ロード、3クリック。3 clcikハンドラ、3ロード。クリックハンドラをリストの親に委譲します。

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

EDIT：