javascript - 单击跨度内的隐藏文件输入会导致 RangeError

Question

我有 HTML:

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

还有 jQuery/JavaScript:

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

基本上，当单击带有 .js-upload 类的跨度时，也应该单击文件输入。但是当我使用 .find() 或 .js-uploader > input[type="file"] 时，它会导致 RangeError。

Answer 1

控制台消息:递归太多

当您单击输入时，它也会冒泡到跨越，但跨越点击处理程序也会导致点击输入

尝试检查event.target是否已输入

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