Chrome/jQuery Uncaught RangeError:超出了最大调用堆栈大小

Question

我在chrome上收到错误"未捕获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

由于"页面中有数万个单元格"将点击事件绑定到每个单元格将导致严重的性能问题.有一种更好的方法,即将click事件绑定到body,然后查找cell元素是否是click的目标.像这样:

$('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>