Question

Jquery .click() 给出“超出堆栈大小”

2016-06-29

13204

javascript jquery

我的代码中什么地方导致了此错误？

jquery-2.1.3.min.js:3 Uncaught RangeError: Maximum call stack size exceeded

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 绑定的任何点击事件处理程序，同时仍保持事件传播（如果任何委托点击事件也绑定则很有用），您可以改为调用本机 DOM click() 方法：

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

或者：

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

与以下方法相同：

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

Answer 2

您已将 click 事件 附加到表单本身。因此，当单击 任何表单元素 时，由于 事件冒泡 ，它会再次被表单 捕获 。因此，它将再次在表单上调用 click 事件 。并且相同的过程一次又一次重复

您可以阻止事件传播

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

   // rest of the code goes here
})

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

Answer 3

您可以为点击事件使用命名空间

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