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

Question

我有 2 个无序列表，每个列表都有自己的 div。 如果我单击第一个列表中的列表项，我希望它移至第二个列表。双击第二个列表时反之亦然。

代码:

$('.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

这是因为您将处理程序绑定(bind)到实际元素。因此，当您更改 DOM 位置时，它们仍然保留在开始时绑定(bind)的相同处理程序。

您需要将处理委托(delegate)给 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/