javascript - jQuery 无法在克隆后删除部分

Question

我为克隆部分 .clone 创建按钮 Add Section 它工作正常......

我无法继续的要点是 Remove Section 这个按钮不起作用。我想点击 Remove Section 它会自行删除部分。

HTML

<div style="margin-bottom:25px;">
    <button class="add_section btn btn-primary" type="button"><i class="fa fa-plus"></i> Add Section</button>
</div>

<div class="panel clone" id="primary">
    <div class="panel-heading">
        <span class="panel-title" id="secPanel">Section #Primary</span>
        <button style="float:right;" class="rem_section btn btn-primary" type="button"><i class="fa fa-remove"></i>Remove Section</button>
    </div>
    <div class="panel-body admin-form">
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-lg-2 control-label">Description</label>
                <div class="col-lg-8">
                    <input id="secTitle" name="txt_sectitle[]" value="" type="text" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="pastclone"></div>

JS

jQuery(document).ready(function() {
    // Init jQuery Add Section
    $('.add_section').on('click', function(){
        var num = $('div.clone').length,
            clone = $('#primary').clone().attr('id', num);

        clone.find('#secPanel').html('Section #' + num);
        clone.find('[type=text]').val('');
        clone.find('.rem_section').attr('class', 'rem_section'+num+' btn btn-primary');
        clone.insertBefore("#pastclone");
        return false;   
    });

    // Init jQuery Remove Section
    $(".clone").on("click", ".rem_section", function(){
        $(this).parent(".clone").remove(); 
        return false;   
    });    
});

我的 JSFIDDLE

Answer 1

克隆元素也是动态创建的，因此您需要将处理程序绑定(bind)到注册事件时存在的动态元素的祖先元素

$(document).on("click", ".clone .rem_section", function(){
    $(this).closest(".clone").remove(); 
    return false;   
});    

此外，当您克隆 rem_section 类时，也不会添加。

clone.find('.rem_section').attr('class', 'rem_section rem_section'+num+' btn btn-primary');

演示:Fiddle