javascript - 超出最大调用堆栈大小避免出现这种情况

Question

我读过很多谈论同一件事的主题，但没有一个真正对我有帮助。

这是我的正文代码:

<div class='row'>
    <div class='main'>
        <div class='header'></div>
        <div class='image'>
            Pick image
        </div>
        <div style='clear: both'></div>
    </div>
</div>
<input type="file" id="file">

在 jQuery 中我有(这有效):

$(".image").click(function(){
    $("#file").click();
});

但是，正如预期的那样，这只适用于第一次 .image 点击。如果我克隆.main，.image上的点击事件将不再起作用。因此，为了解决这个问题，我需要实现 $(document)，这就是我所做的。

$(document).on('click', $(".image"), function(event){
    $("#file").click();
});

虽然这段代码不起作用，但检索错误:

Uncaught RangeError: Maximum call stack size exceeded

谷歌上的一些搜索告诉我在 .click() 之后使用 event.stopPropagation();，但它也不起作用。

Answer 1

尝试这样的事情]

从此更改您的代码

$(".image").click(function(){
    $("#file").click();
});

致

   $(document).on('click','.image',function(){
        $("#file").click();
    });