javascript - jquery克隆输入文件在克隆div时没有添加文件

Question

如果我单击“添加更多”按钮，则使用当前代码处理 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);
    });

这是 fiddle Link

请在这里提出建议

Answer 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