Javascript Jquery.click（）给我；超出堆栈大小“0”；

在我的代码中，什么给了我这个错误？

jquery-2.1.3.min.js:3未捕获范围错误：最大调用堆栈大小 超过

HTML

<form id="addPhotoForm">
    <img class="pull-right" src="" width="100px" height="140px"/>
    <input type="file" id="addPhotoInput" name="addPhotoInput" style="display: none;"/> 
</form>

如何解决此错误？
我试图在单击表单时打开“文件”对话框

更新
我试过：

---

您已经附加了

click event

以形成它自己。因此，当

任何表单元素

被单击时，由于

事件冒泡

它会再次被表单捕获

。因此，它会再次调用表单上的
click event
。同样的过程会重复一次又一次

你可以防止

编辑：
您应该将事件处理程序附加到表单中对最终用户可见的其他元素，而不是表单
似乎有一个循环

//On click Photo
$('#addPhotoForm').on('click', function(){
    //Check if usrname exist
    var usrname = $('#usrname').val();
    if(usrname){
        $('#addPhotoInput').trigger('click');
    }
    else{
        alert("!");
    }
})

当您单击表单时，事件侦听器会触发表单内输入的click event。输入上的click事件会将click事件上升到DOM树。再次触发窗体上的单击事件侦听器

在单击输入时，需要防止click事件冒泡

$('#addPhotoInput').click(function(e){
   e.stopPropagation();
   // do some action
});

为了避免使用jQuery绑定的任何单击事件处理程序被触发，并且仍然保持事件传播（如果任何委托单击事件也被绑定，则非常有用），您可以调用本机DOM
click（）
方法：

$('#addPhotoInput')[0].click();

或：

与以下内容相同：

document.getElementById('addPhotoInput').click();

您需要停止
#addPhotoInput
的单击事件冒泡

$('#addPhotoInput').on('click', function(e){
    e.stopPropagation();

    // your code
}

单击子图元时，父图元也会收到单击

e.stopPropagation（）
防止这种行为

在您的例子中，单击
#addPhotoInput
也意味着单击
#addPhotoForm
，因为它们是嵌套的。因此，表单的事件处理程序被调用，它再次触发输入处理程序，以递归和无限的方式重复该过程

这就是您收到该特定错误消息的原因。
您可以为单击事件使用名称空间

$('#addPhotoInput').on('click.input',function(){
    // do something
});

//On click Photo
$('#addPhotoForm').on('click.form', function(){
    //Check if usrname exist
    var usrname = $('#usrname').val();
    if(usrname){
        $('#addPhotoInput').trigger('click.input');
    }
    else{
        alert("!");
    }
})

在我的例子中，我正在监听一个鼠标事件并发出一个相应的新事件，这导致了一个循环。我发现检查在这里很有用，因为我们可以区分“真实”和“人为”事件：

listen（myElement，['mousedown'，事件=>{
//检查这是一个“真实的”事件，还是我们自己的（避免无休止的循环）
如果（事件已信任）{
const newEvent=newmouseevent（event.type，event）；
myOtherElement.dispatchEvent（新事件）；
newEvent.stopPropagation（）；
});
返回true；
}
无限循环。。。单击处理程序在其内部被一次又一次地调用…您在这里试图实现什么？单击表单中的元素或提交表单时？@Rayon怎么会这样？我怎么才能阻止它呢？@Mjukis，
$（'addPhotoInput'）。触发器（'click'）将调用它..要阻止它，请不要触发它@Mjukis然后调用本机DOM click方法：
$（'#addPhotoInput'）[0]。单击（）问题是关于子单击事件传播，而不是父级
$（“#addPhotoForm”）
应该是
$（“#addPhotoInput”）
当子项被单击时，它会被冒泡到DOM树中的父项，但您正在
#addPhotoForm
级别停止单击事件传播，我现在可以看到它了。谢谢你的解释。
$('#addPhotoInput').get(0).click();

document.getElementById('addPhotoInput').click();

$('#addPhotoInput').on('click', function(e){
    e.stopPropagation();

    // your code
}

$('#addPhotoInput').on('click.input',function(){
    // do something
});

//On click Photo
$('#addPhotoForm').on('click.form', function(){
    //Check if usrname exist
    var usrname = $('#usrname').val();
    if(usrname){
        $('#addPhotoInput').trigger('click.input');
    }
    else{
        alert("!");
    }
})