Question

I have the HTML:

<span class="btn btn-success js-uploader">
    <i class="icon-upload icon-white"></i> Upload
    <input type="file" multiple>
</span>

And the jQuery/JavaScript:

$('.js-uploader').click(function(){
    $(this).find('input[type="file"]').click();
});

Basically, when a span with the class.js-upload is clicked, the file input should be clicked as well. But when I use .find() or .js-uploader > input[type="file"], it causes a RangeError.

Answer 1

console message: too much recursion

when you click on the input it also bubles to span, but span click-handler also causes click on input

try to check if the event.target is input

$('.js-uploader').click(function(e){
     if ($(e.target).is('input[type="file"]')) return;
     $(this).find('input[type="file"]').click();
});