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

Question

我的代码中的什么给了我这个错误？< br >

jquery-2.1.3.min.js:3 Uncaught RangeError：超出最大调用堆栈大小

超文本标记语言

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

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

更新我试过：

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

Answer 1

可以将命名空间用于单击事件

$('#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("!");
    }
})

Answer 2

您已经将< code>click event附加到窗体本身。因此，当单击< code >任何表单元素时，由于< code >事件冒泡，它会再次被表单< code >捕获。因此，它将再次调用窗体上的< code>click事件。同样的过程一次又一次地重复

您可以防止事件传播

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

   // rest of the code goes here
})

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

Answer 3

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

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

或者：

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

这与以下内容相同:

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