jquery clone input file was not adding file when clone div

Question

Working on the jquery clone with the current code if I click add more button I am able to clone in the original one i can able to attach the file but if I try to attach any file in the cloned one it is not working.

I tried even replacing id with class but still it is not working

Here is the jquery code

    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);
    });

Here is the fiddle Link

Kindly suggest here

Click to the right of the 'Attach' button and you'll notice the `input` is misplaced. You would have to do a deep clone by the way to copy the event listeners. — Shikkediel, Sep 17 '15 at 03:21
hi thanks for the suggestion I have tired with true for the clone but not working can you please help me — Mr.M, Sep 17 '15 at 05:11
Seems to work alright when using `clone(true, true)`. Apart from the `input` itself being offset to the right from the button in the fiddle (seems to be in place when pasted in Codepen). I'd be very careful with any kind of file uploads by the way. http://codepen.io/anon/pen/RWaRzz — Shikkediel, Sep 17 '15 at 06:01
@hi thanks for the reply first time when the user click the attach button he can able to attach once when the user click the add more then he tries the attach button from the cloned div it was not working kindly please suggest me — Mr.M, Sep 17 '15 at 08:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89888/discussion-between-mahadevan-and-shikkediel). — Mr.M, Sep 17 '15 at 08:51

score 0 · Answer 1 · answered Dec 12 '15 at 01:58

You need to attach unique events for each element, if you create a function that attaches the events to a received element the problem will be solved:

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);
    });

  }

I've modified your example:

jsfiddle

jquery clone input file was not adding file when clone div

1 Answers1