Chrome/jQuery 未捕获范围错误：超出最大调用堆栈大小

Question

我在 chrome 上收到错误“Uncaught RangeError：超出最大调用堆栈大小”。这是我的 jQuery 函数

$('td').click(function () {
        if ($(this).context.id != null && $(this).context.id != '') {
            foo($('#docId').val(), $(this).attr('id'));
        }
        return false;
    });

请注意，页面中有数万个单元格。然而，我通常将堆栈溢出与递归联系起来，在这种情况下，据我所知，没有堆栈溢出。

创建这样的 lambda 是否会自动在堆栈上生成大量内容？有什么办法解决吗？

目前我唯一的解决方法是在渲染 HTML 时在每个单元格上显式生成 onclick 事件，这会使 HTML 变得更大。

Answer 1

由于“页面中有数以万计的单元格”，将点击事件绑定到每个单元格将导致可怕的性能问题。有一个更好的方法来做到这一点，即将点击事件绑定到主体，然后找出单元格元素是否是点击的目标。像这样：

$('body').click(function(e){
       var Elem = e.target;
       if (Elem.nodeName=='td'){
           //.... your business goes here....
           // remember to replace $(this) with $(Elem)
       }
})

此方法不仅可以使用本机“td”标签完成您的任务，还可以使用稍后附加的“td”来完成您的任务。我想您会对这篇关于 事件绑定和委托

的文章感兴趣

---

或者你可以简单地使用 jQuery 的“.on()”方法，具有相同的效果：

$('body').on('click', 'td', function(){
        ...
});

Answer 2

当您有无限循环时，您也可能会收到此错误。确保您没有任何无休止的递归自我引用。

Answer 3

我的错误更多，发生的是循环点击（我猜），基本上通过点击登录，父级也被点击，最终导致超出最大调用堆栈大小。

$('.clickhere').click(function(){
   $('.login').click();
});

<li class="clickhere">
  <a href="#" class="login">login</a>
</li>

Answer 4

当我在一个带有许多其他 jQuery 插件的网站中使用 jQUery Fancybox 时，就发生了这个问题。 当我使用 LightBox（网站）而不是 Fancybox 时，问题就消失了。

Answer 5

你可以使用

  $(document).on('click','p.class',function(e){
   e.preventDefault();
      //Code 
   });

Answer 6

我最近也遇到了这个问题。我在对话框 div 中有一个非常大的表。它超过 15,000 行。当在对话框 div 上调用 .empty() 时，我收到了上面的错误。

我找到了一个迂回的解决方案，在调用清理对话框之前，我会从非常大的表中删除所有其他行，然后调用 .empty()。不过，这似乎已经奏效了。看来我的旧版 JQuery 无法处理这么大的元素。

Answer 7

我收到此错误是因为我忘记声明在 Ajax 数据中传递的变量之一。首先声明了仅模式。

data: {
     tmp_id: tmp_id,
     mode: mode
}

还声明了 tmp_id 变量并且工作正常。

let tmp_id=$("#tmp_id").val();
let mode=$("#mode").val();
$.ajax({
    url: 'my-url',
    method: 'post',
    data: {
     tmp_id: tmp_id,
     mode: mode
    }
    dataType: 'json',
    success: function(response) {
       console.log(response);
    }
    });
 }

Answer 8

   In My case I was html element insted of value
                          |
                          |
   var uname=$("#uname");<-
    
   let data={
     uid:uid,
     .....
   };        
    
   $.post("url",data,(responseText)=>{ 
       ..
   }).fail((xhr)=>{
       ..
   });
    
  then I updated 
                              |
                              |
  var uname=$("#uname").val()<- 

Answer 9

确保在未获取元素值的情况下不会访问元素。由于省略了 val() 函数，我已经能够轻松地重现这个问题。

例如：

$.ajax({
    url : '/url-test',
    type : 'GET',
    data : {
        'country':$("#test_input_field")
    }

应该是

$.ajax({
    url : '/url-test',
    type : 'GET',
    data : {
        'country':$("#country__c").val()
    }

Answer 10

对我来说，当我应该引用 $('#inputfield').val();

时，我试图引用 $('#inputfield')