jquery - 更新移动的 DOM 元素的点击事件

Question

我在自己的 div 中有 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 功能不会更新。

Answer 1

那是因为您将处理程序绑定到实际元素。因此，当您更改 thair 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/