超过了最大调用堆栈大小，避免了这种情况答案

【问题标题】：Maximum call stack size exceeded avoiding this超过了最大调用堆栈大小，避免了这种情况
【发布时间】：2014-05-27 18:55:31
【问题描述】：

我读过很多关于同一件事的话题，但没有一个对我有真正的帮助。

这是我的正文代码：

<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();
});

虽然这段代码不起作用并检索到错误：

未捕获的 RangeError：超出最大调用堆栈大小

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

【问题讨论】：

.on() 的第二个参数应该是一个包含选择器的字符串，而不是一个 jQuery 对象。
第一件事不需要在这里将选择器包装在$ $(document).on('click', ".image", function(event){
只使用“.image” ...

标签： javascript jquery

【解决方案1】：

试试这样的]

从此更改您的代码

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

到

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

【讨论】：

【解决方案2】：

换行试试：

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

收件人：

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

【讨论】：

【解决方案3】：

你的语法不正确，应该是：

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

【讨论】：