Question

我看到许多其他问题看起来像我的，但是没有一个与我的需求相对应。看到我的3个目标：

如果我点击 tableFirst 的复选框行，请删除该行并将其复制到 tabletableSecond 行

tableSecond

将** tableSecond的这一行删除并返回**到tableFirst
一旦该行返回到 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。

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

Answer 1

所以我注意到在#tableSecond中，您正在使用事件委托。如您所愿，鉴于您正在监听的事件已附加到不存在的（开始时）DOM节点。您遇到的问题是，您从第一个表中删除了该DOM节点，将其粘贴在第二个表中，而第二个的事件处理程序（被委派）捕获了它。

但是在第一个表中，您正在侦听类级别的事件。相反，请收听#tableFirst。

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节点时，它不再处理其事件。因此，您应该聆听容器，并让IT人员管理动态元素的内部事件。

要查看其实际效果：your updated JSFiddle

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

1 个答案: