Chrome / jQuery未捕获RangeError：超出最大调用堆栈大小 [英] Chrome/jQuery Uncaught RangeError: Maximum call stack size exceeded

问题描述

我在chrome上收到错误Uncaught RangeError：Maximum call stack size exceeded。这里是我的jQuery函数

  $（'td'）。click（function（）{
 if（$这个）.context.id！= null&& $（this）.context.id！=''）{
 foo（$（'＃docId'）。val（），$（this）。 attr（'id'））; 
} 
 return false; 
}）; 
  

请注意，页面中有数以万计的单元格。但是，我通常会将堆栈溢出与递归联系起来，并且在这种情况下，就我看到的情况而言，它们都没有。

创建这样的lambda是否会自动生成一堆东西在堆栈上？现在我唯一的解决方法是在呈现HTML时在每个单元格上显式生成onclick事件，这使HTML变得非常简单因为页面中有成千上万个单元格将点击事件绑定到每个单元格将会更大。

造成可怕的性能问题。还有一种更好的方法可以做到这一点，即将点击事件绑定到body&然后查明单元元素是否是点击的目标。像这样：

  $（'body'）。click（function（e）{
 var Elem = e。目标; 
 if（Elem.nodeName =='td'）{
 // ....您的业务在这里...... 
 //记得将$（this）替换为$（Elem）
} 
}）
  

这种方法不仅可以做你的任务带有本地td标签，但也有后面附加的td。我想你会对这篇关于事件绑定&委托

---

或者您可以简单地使用。on（）jQuery的方法具有相同的效果：

 <$ c $（'body'）。on（'click'，'td'，function（）{
 ... 
}）; 
  

I am getting the error "Uncaught RangeError: Maximum call stack size exceeded" on chrome. here is my jQuery function

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

Note that there are tens of thousands of cells in the page. However, I generally associate stack overflows with recursion and in this case as far as I can see there is none.

Does creating a lambda like this automatically generate a load of stuff on the stack? is there any way round it?

At the moment the only workaround I have is to generate the onclick events explicitly on each cell when rendering the HTML, which makes the HTML much larger.

解决方案

As "there are tens of thousands of cells in the page" binding the click-event to every single cell will cause a terrible performance problem. There's a better way to do this, that is binding a click event to the body & then finding out if the cell element was the target of the click. Like this:

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

This method will not only do your task with native "td" tag but also with later appended "td". I think you'll be interested in this article about event binding & delegate

---

Or you can simply use the ".on()" method of jQuery with the same effect:

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

这篇关于Chrome / jQuery未捕获RangeError：超出最大调用堆栈大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！