2

それぞれ独自の div に 2 つの順序付けられていないリストがあります。最初のリストのリスト項目をクリックすると、2 番目のリストに移動します。2 番目のリストをダブルクリックすると、その逆になります。

コード：

$('.filelist > ul > li > a').click(function(){
    //
    // Clicked file in Filelist (list 1)
    //
    console.log('file in list');
    $(this).parent().appendTo('#queue-list');           
});
$('.queuelist > ul > li > a').dblclick(function(){
    //
    // Clicked file in Queue (list 2
    //
    console.log('file in queue');
    $(this).parent().appendTo('#file-list');
});

最初の部分は機能し、リスト項目はリスト 1 からリスト 2 に移動されます。しかし、リスト 2 で (ダブルクリックではなく) クリックすると、「リスト内のファイル」が記録されるため、移動した要素の onclick 関数は更新されません。

4

1 に答える 1

4

これは、ハンドラーを実際の要素にバインドするためです。そのため、DOM の場所を変更しても、最初にバインドされた同じハンドラーが維持されます。

ul処理を要素に委任する必要があります (メソッドを使用し.on()ます)

$('.filelist > ul').on('click',' > li > a', function(){
    //
    // Clicked file in Filelist (list 1)
    //
    console.log('file in list');
    $(this).parent().appendTo('#queue-list');           
});
$('.queuelist > ul').on('dblclick',' > li > a', function(){
    //
    // Clicked file in Queue (list 2
    //
    console.log('file in queue');
    $(this).parent().appendTo('#file-list');
});

http://jsfiddle.net/gaby/XhD9H/のデモ

于 2013-06-22T11:42:22.110 に答える