Question

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

jquery-2.1.3.min.js：3 Uncaught 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

您已附加click event以形成自己。因此，当any form element被点击时，event bubbling因captured而被click event再次显示。所以，它会调用{ {1}}再次表格。并且一次又一次地重复相同的过程

您可以阻止event propagation

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

   // rest of the code goes here
})

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

Answer 2

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

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

或者：

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

与以下内容相同：

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

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

Answer 4

似乎有一个循环

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

当您单击表单时，事件侦听器会在表单内的输入上触发click事件。并且输入气泡上的click事件单击事件直到DOM树。表单上的click事件侦听器再次被触发。

单击输入

时，需要防止冒出点击事件

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

Answer 5

您需要阻止#addPhotoInput点击事件冒泡。

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

    // your code
}

单击子元素时，父元素也会收到单击。

e.stopPropagation()阻止了这种行为。

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

这就是您收到该特定错误消息的原因。

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

5 个答案: