克隆 div 时 jquery 克隆输入文件未添加文件答案

【问题标题】：jquery clone input file was not adding file when clone div克隆 div 时 jquery 克隆输入文件未添加文件
【发布时间】：2015-12-13 15:03:33
【问题描述】：

如果我单击“添加更多”按钮，则使用当前代码处理 jquery 克隆我可以在原始代码中进行克隆，我可以附加文件，但是如果我尝试在克隆的文件中附加任何文件，则它不起作用.

我什至尝试将 id 替换为 class，但仍然无法正常工作

这里是jquery代码

    var count=0;
    $(document).on("click", ".attch_add_button", function () {
        var $clone = $('.cloned-row4:eq(0)').clone(true,true);
        //$(".custom-file-input").closest('form').trigger('reset');
        //$(".custom-file-input").replaceWith('.check'.val('').clone(true));
        //alert("Clone number" + 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.find('.preview').hide();
        $clone.wrap('<form>');
        $clone.closest('form').trigger('reset');
        $clone.unwrap();

        //$clone.find('input[type=file]').val('');

        //$clone.find('.pn_field').val("");
        $(this).parents('.medica_rpt').after($clone);
    });

这是小提琴Link

请在这里推荐

【问题讨论】：

单击“附加”按钮右侧，您会注意到input 放错了位置。顺便说一句，您必须进行深度克隆才能复制事件侦听器。
您好，感谢您提出的建议，我已经厌倦了克隆，但无法正常工作，您能帮帮我吗
您好，请给我建议
使用clone(true, true) 时似乎可以正常工作。除了 input 本身从小提琴中的按钮向右偏移（在 Codepen 中粘贴时似乎就位）。顺便说一句，我会非常小心任何类型的文件上传。 codepen.io/anon/pen/RWaRzz
@hi 感谢用户第一次点击附加按钮时的回复，当用户点击添加时他可以附加一次，然后他尝试克隆 div 中的附加按钮，但它不起作用请建议我

标签： javascript jquery html css

【解决方案1】：

您需要为每个元素附加唯一的事件，如果您创建一个将事件附加到接收到的元素的函数，问题将得到解决：

function addActions(container){

    var $preview = container.find(".preview");
    //var $acceptdiv = $("#accept_div");
    //$acceptdiv.hide();
    $preview.hide();

    container.find(".check").on("change", function(){
      alert("alert");
      var filename = this.value;
      var files = this.files;
      var URL = window.URL||window.webkitURL;
      var url = URL.createObjectURL(files[0]);
      $preview.attr("href", url);
      $preview.show();
      //$acceptdiv.show();
      container.find("#file_name").val(filename).prop("disabled", true);
    });

  }

我修改了你的例子：

jsfiddle

【讨论】：