克隆jQuery输入文件未清除

Question

使用我当前的代码，我可以克隆整个div。 但是，如果用户附加了任何文档，则用户单击添加更多按钮，则克隆的div上的数据将保持不变。

这是我到目前为止无法使用的代码。 您还可以在js小提琴上看到此内容： 链接

我尝试使用以下代码`$（“。custom-file-input”）。closest（'form'）。trigger（'reset'）; 但这是重置原始div而不是克隆副本。 我有些落后的地方请帮助我。

var count=0;
$(document).on("click", ".attch_add_button", function () {
    var $clone = $('.cloned-row4:eq(0)').clone();

    $clone.find('[id]').each(function(){this.id+=''});
    $clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
    $clone.attr('id', "added"+(++count));
    $clone.find('.preview').hide();
    $clone.wrap('<form>');
    $clone.closest('form').trigger('reset');
    $clone.unwrap();

    $(this).parents('.medica_rpt').after($clone);
});


$(document).on('click', ".btn_less1", function (){
    var len = $('.cloned-row4').length;
    if(len>1){
        $(this).closest(".btn_less1").parents('.medica_rpt').remove();
    }
}); 

这是HTML代码

<div class="medica_rpt cloned-row4" >
    <div class="row">
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
            &nbsp;
        </div>
        <div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted ?</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted by</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accep">Accepted on</label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <label class="lbl_accepft">Document Remarks</label>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-sm-3 col-md-3 col-lg-3">
            <div class="custom-file-input" id="custom-file-input">
                <input type="file" class="check">
                <input type="text" class="txt_field ctm_widt check" id="file_name" disabled placeholder="Attached File">
                <button class="cst_select ">
                    <i class="fa  fa-rotate-90">
                    </i> Attach
                </button>
            </div>
            <a href="#" target="_blank" class="preview">View</a>
        </div>
        <div class="col-xs-2 col-sm-1 col-md-2 col-lg-2 ctm_lft_mrpt">
            <input type="checkbox">
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <input type="text" class="smipt_Field" id="accpt_by" name="accpt_by" disabled/>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <input type="text" class="smipt_Field" id="accpt_on" name="accpt_on" disabled/>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ctm_lft_mrpt">
            <select class="slt_Field" id="txt_dcmRem" name="txt_dcmRem">
                <option value="" selected='selected'>&nbsp; </option>
                <option value="COLR">Coloured Copy Required</option>
                <option value="EXPR">Expired Document</option>
                <option value="INSF">Insufficient</option>
                <option value="INVD">Invalid Document</option>
                <option value="LOWR">Low Resolution</option>
            </select>
        </div>
    </div>
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12 pull-right clear">
            <input type="button" class="btn_more btn_right attch_add_button"/>
            <!--<button class="btn_more btn_right attch_add_button"></button>-->
        </div>
    </div>
</div>

提前致谢

请帮助我，我在这里感到困惑。

Answer 1

如果要克隆表单元素，则最好的解决方法是重置克隆的表单。

在小提琴示例中，根本没有表单，因此，如果要克隆一些输入字段而不是整个表单，则可能需要将这些输入包装在表单中，重置该表单，然后解开包装。

您的JS最终应类似于以下内容：

$(document).on("click", ".attch_add_button", function () {
    var $clone = $('.cloned-row4:eq(0)').clone();
    $clone.find('[id]').each(function(){this.id+=''});
    $clone.find('.btn_more').after("<input type='button' class='btn_right btn_less1' id='buttonless'/>")
    $clone.attr('id', "added"+(++count));
    $clone.find('#custom-file-input').val('');

    $clone.wrap('<form>');
    $clone.closest('form').reset();
    $clone.unwrap();

    $(this).parents('.medica_rpt').after($clone);
});

您可能想检查关于此问题的便当者的答案