HTML面板中的jQuery克隆表行

Question

我在面板中有一個面板和一個桌子。 我正在動態添加這些面板，並使用jQuery將行動態添加到表中。 表行的克隆工作很好，但是一旦我添加了另一個面板，表行的克隆在第二個表上就行不通了，請幫忙。

js代碼添加面板：

$('#addBtn').click(function () {

    var total = parseInt($("#click_count").val()) + 1;
    $("#click_count").val(total);

    var htmlcontent = $(".panel-body:last").html();


    var beforecontent = '<div class="panel panel-info po_panel">'
        + '<div class="panel-heading">'
        + '<h6 class="panel-title">'
        + '<a  data-toggle="collapse"  href="#po' + total + '">Add Panel</a>'
        + '</h6>'
        + '</div>'
        + '<div id="po' + total + '" class="panel-collapse collapse in">'
        + '<div class="panel-body">' + htmlcontent + '</div></div> </div>';

    $(beforecontent).insertAfter(".po_panel:last");
});

克隆表行的JS代碼：

$(function() {
    $(".btn").click(function(){
        var clone = $(this).closest('tr').clone(true);
        $("td:first-child", clone).empty();
        $("td:first-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>');
        clone.insertAfter( $(this).closest('tr'));
    });
    $("table.table").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

Answer 1

嘗試使用這個。

$(function() {
    $("body").on('click', '.btn', function(){
        var clone = $(this).closest('tr').clone(true);
        $("td:first-child", clone).empty();
        $("td:first-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>');
        clone.insertAfter( $(this).closest('tr'));
    });
    $("table.table").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

注意：您可以使用包含所有面板的容器div更改$("body") 。