Question

使用我当前的代码，我能够克隆整个div。但是，如果用户附加任何文档，则用户单击“添加更多”按钮，数据在克隆的div上保持相同。

这是我到目前为止的代码无法正常工作。你也可以在js小提琴上看到这个：Link

我尝试使用以下代码`$（“。custom-file-input”）。nearest（'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);
});

您可能想在THIS问题

上查看slipheed的答案

clone jquery输入文件没有清除

1 个答案: