0

我试图在两个表之间移动行，但我无法让它保持 click 事件绑定到它。我对.on事件的选择器部分感到困惑，我不确定我应该以此为目标。

基本上我可以让它移动到一张桌子，然后返回，但它失去了点击属性。不知道为什么。

我附上了一个小提琴（http://jsfiddle.net/Yjqkn/216/）以使问题更清楚。批准按钮将其向下移动，等待列表按钮将其移回，但随后它会丢失所有事件侦听器我是否需要使用.bind解决此问题的最佳方法来重新绑定它们。

我试过了：.on("click","button.remove-participant",function()没用

Javascript

$( ":button" ).on("click",function(){

    if($(this).hasClass('remove-participant')) {
        $(this).removeClass('remove-participant').addClass('add-participant');
        $(this).html('Approve');
        var current_row = $(this).closest('tr').html();

        $('.table_2 > tbody:last').append('<tr>'+current_row+'</tr>');
        $(this).closest('tr').remove();

        $( ".table_2 .add-participant" ).bind( "click", function() {
            $(this).removeClass('add-participant').addClass('remove-participant');
            var current_row = $(this).closest('tr').html();
            $(this).html('Waitlist');

            $('.table_1 > tbody:last').append('<tr>'+current_row+'</tr>');
            $(this).closest('tr').remove();
        });
    }
});

HTML

<table class="table_1">
  <tr>
    <th>Info Header 1</th><th>Info Header 2</th>
  </tr>
  <tbody>
    <tr><td>Don</td>
      <td><button class="remove-participant" name="">Remove</button></td>
    </tr>
  </tbody>
</table>
<table class="table_2">
  <tr>
    <th>Info Header 1</th><th>Info Header 2</th>
  </tr>
  <tbody>
    <tr></tr>
  </tbody>
</table>
4

2 回答 2

1

你应该使用：

$(".table_1").on("click", "button.remove_participant", function() {
    ...
});

事件委托的总体思路是，您将处理程序绑定到 DOM 中的一些静态元素，并将包含所有动态添加的元素。然后选择器参数应该指定您要委托给的更具体的动态元素。

您将处理程序绑定click到.table_2 .add_participant单击button.remove_participant处理程序中也看起来不正确。每次删除参与者时，它都会为每个.add_participant元素添加另一个单击处理程序，因此当您单击这些元素时，处理程序将运行多次。您应该只委托处理程序一次——委托的全部意义在于它获取动态更改，因此您无需在每次修改 DOM 时重做它。

顺便提一句，

.removeClass('class1').addClass('class2');

可以组合成：

toggleClass('class1 class2');
于 2013-09-19T00:54:36.820 回答
-1

在我看来，您的代码不起作用是因为您的逻辑。您在这里执行此操作：在表 1 中，您正在删除该类。$(this).removeClass('remove-participant').addClass('add-participant');

当您单击表 2 时，请执行相同的操作。但是您永远不会返回并在表 1 中添加 remove-participant 类。因此，表 1 中的单击不起作用，因为类设置为“add-participant”并且没有改回。

于 2013-09-19T01:00:15.240 回答