jQuery .click（）给我“超出堆栈大小”

Question

我的代码中有什么给我这个错误？

jquery-2.1.3.min.js：3未捕获的RangeError：超出最大调用堆栈大小

的HTML

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

JS

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

我该如何解决这个错误？
单击表单时，我试图打开文件对话框。

我尝试的更新：

$('#addPhotoInput').click();

Answer 1

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

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

要么：

$('#addPhotoInput').get(0).click();

与以下内容相同：

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

Answer 2

您已附加click event到表单本身。因此，当any form element单击时，由于event bubbling它captured再次通过表单获取。因此，它将click event再次调用表单。并且一次又一次重复相同的过程

您可以阻止事件传播

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

   // rest of the code goes here
})

编辑：您应该将事件处理程序附加到表单内的其他元素，该元素对最终用户可见而不是表单