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
– Shikkediel, Commented Sep 17, 2015 at 3:21
hi thanks for the suggestion I have tired with true for the clone but not working can you please help me — Mr.M
– Mr.M, Commented Sep 17, 2015 at 5: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. codepen.io/anon/pen/RWaRzz — Shikkediel
– Shikkediel, Commented Sep 17, 2015 at 6: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
– Mr.M, Commented Sep 17, 2015 at 8:14

ElChiniNet · Accepted Answer · 2015-12-12 01:58:52Z

0

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

answered Dec 12, 2015 at 1:58

ElChiniNet

2,9183 gold badges22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery clone input file was not adding file when clone div

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related