jquery在表之间移动行禁用javascript

Question

我在表之间移动行，它似乎工作正常但是一旦该行在另一个表中，与该行相关的所有javascript函数都不再起作用，我不知道为什么。

javascript非常简单我将html用于行并将其移动到另一个表中。

如果单击子选项卡，它们可以正常工作，但是单击等待列表（或批准移动到上面的表格）将其移动到下面的表格，该行的选项卡不再有效。

奇怪的是没有抛出任何错误，控制台中没有记录任何内容。

http://jsfiddle.net/Ha3Jq/16/

   

Jquery的

$( ".enrolled-participants" ).on("click","button.remove-participant",function(){
    if($(this).hasClass('remove-participant')) 
    {
       $(this).html('Approve');
       $(this).removeClass('remove-participant').addClass('add-participant');
       var className = $(this).closest('tr').attr('class');
       var childClass =$(this).closest('tr').next().attr('class');
       var current_row = $(this).closest('tr').html();
       var child_row = $(this).closest('tr').next().html();
         $(this).closest('tr').next().remove();
         $(this).closest('tr').remove();
         $('.waitlisted > tbody:last').append('<tr class="'+className+'">'+current_row+'</tr><tr class="'+childClass+'">'+child_row+'</tr>');
     }

我也在使用表格分类器插件。

的tablesorter

    $(".enrolled-participants,.waitlisted")
        .tablesorter({
            theme : 'blue',
            // this is the default setting
            cssChildRow: "tablesorter-childRow",

            // initialize zebra and filter widgets
            widgets: ["zebra", "filter"],

            widgetOptions: {
                // include child row content while filtering, if true
                filter_childRows  : true,
                // class name applied to filter row and each input
                filter_cssFilter  : 'tablesorter-filter',
                // search from beginning
                filter_startsWith : false,
                // Set this option to false to make the searches case sensitive 
                filter_ignoreCase : true
            }

        });

    // hide child rows
    //$('.tablesorter-childRow td').hide();

    // Toggle child row content (td), not hiding the row since we are using rowspan
    // Using delegate because the pager plugin rebuilds the table after each page change
    // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
    $('.tablesorter').delegate('.toggle', 'click' ,function(){
//alert('ok');
        // use "nextUntil" to toggle multiple child rows
        // toggle table cells instead of the row
        $(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('td').toggle();

        return false;
    });

    // Toggle widgetFilterChildRows option
    $('button.toggle-option').click(function(){
        var c = $('.tablesorter')[0].config.widgetOptions,
        o = !c.filter_childRows;
        c.filter_childRows = o;
        $('.state').html(o.toString());
        // update filter; include false parameter to force a new search
        $('input.tablesorter-filter').trigger('search', false);
        return false;
    });

Answer 1

使用detach代替remove。

remove将其从DOM中删除，并删除所有（JavaScript）事件侦听器。

detach只是将其从DOM中删除;事件监听器保持不变。