Maximum call [...] while trying to open file dialog

Asked

Viewed 15 times

1

HTML

<div class="send">click<input name="files[]" class="file" type="file"></div>

Javascript:

$('body').on('click', '.send', function(e) {
     $(document).find('.file').click();
});

CSS:

 input {
   opacity: 0;
 }

When clicking on "click" the error is returned, as it detects click on the parent div and daughter provoking a loop, how to solve? I look forward to just opening the input file.

ex: https://jsfiddle.net/s5rzjfhn/3/

javascript input

1 answer

2


The problem is that when you do .find('.file').click(); it will fire an event at the parent element also, by propagation in the DOM.

You need to add another event headset that stops the spread of the event to the parent element, right in the input.

$('body').on('click', '.send_file', function(e) {
    e.stopPropagation();
});

jsFiddle: https://jsfiddle.net/xsoxrbw0/

But the way I think it’s best to do this is without Javascript. Using only one label thus:

<label class="send normal_send">click
    <input name="files[]" class="send_file" type="file">
</label>

jsFiddle: https://jsfiddle.net/jzacpz2p/

  • I didn’t know that one from label tested in my script but it didn’t work, must be because it is an icon made with the :before. Thanks for the solution!!

Browser other questions tagged javascript input

You are not signed in. Login or sign up in order to post.