代码之家 › 专栏 › 技术社区 › Diasline

将表行复制到另一个表行jquery

html jquery

Diasline · 技术社区 · 6 年前

我看到许多其他问题看起来像我的,但没有一个符合我的需要。看我的三个目标:

如果我单击 表优先 删除此行并复制它 到表秒 行
删除并返回**这一行**tableSecond到tableFirst 单击复选框后表秒行
一旦行返回到 表优先 我应该可以 返回到tableSecond 再次单击他的复选框后,此操作应反之亦然

我成功地实现了目标1和目标2

目标1

jQuery('.copy-one').on('click', function(e) {
if($(this).is(':checked',true)) {
$(this).closest('tr').fadeOut(800, function(){ 
$(this).remove();
});
$(this).closest('tr').clone().appendTo('#tableSecond>tbody');
}

})

目标2

$('#tableSecond').on('click','.copy-one',function(e){
 e.preventDefault();
$(this).closest('tr').fadeOut(800, function(){ 
$(this).remove();
});
$(this).closest('tr').clone().appendTo('#tableFirst>tbody');
})

我被困在第三个进球。

请帮助实现目标3,我的小提琴: http://jsfiddle.net/8ayrs3ed/5/

1 回复 | 直到 6 年前

Snowmonkey 6 年前

所以我注意到,在tableSecond中,您使用的是事件委托。如您所需,假设您正在收听的事件被连接到一个不存在的(开始时)DOM节点。您遇到的问题是从第一个表中删除该DOM节点,将其粘贴到第二个表中,第二个表的事件处理程序(被委托)将捕获该节点。

但在第一个表中,您是在课堂上收听事件。相反,先在桌子前听。

jQuery('#tableFirst').on('click', ".copy-one", function(e) {
  if($(this).is(':checked',true)) {
    $(this).closest('tr').fadeOut(800, function(){ 
      $(this).remove();
    });
     $(this).closest('tr').clone().appendTo('#tableSecond>tbody');
  }
})

事件委派是一个永恒的问题。当从第一个表中删除该DOM节点时,它不再处理其事件。因此,您应该监听容器,让它管理动态元素的内部事件。

要查看它的运行情况: your updated JSFiddle