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/

演示

更新已移动DOM元素的单击事件

1 个答案: