Chrome/jQuery Uncaught RangeError: Maximum call stack size exceeded

Question

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

$(\'td\').click(function () {
                 


        

Answer 1

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(){
        ...
});