Chrome/jQuery Uncaught RangeError: Maximum call stack size exceeded
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(){
...
});
You can also get this error when you have an infinite loop. Make sure that you don't have any unending, recursive self references.
我更是一个错误，发生了什么是循环点击（我猜）基本上通过点击登录父母也被点击，最终导致超过最大调用堆栈大小。
$('.clickhere').click(function(){
$('.login').click();
});
<li class="clickhere">
<a href="#" class="login">login</a>
</li>