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

Braun

Are you sure the foo function doesn't recurse? Does the error still happen if you remove that function call? – Dezhnev

Does it work as expected in other browsers? Does this error occures when you comment the foo($('#docId').val(), $(this).attr('id')); line? -- Extra performance tip: cache the result of selectors - for example keep the result of $(this) in a variable and than use it across your handler as needed. – Hanan

I have a similar issue but need mouseenter events. When using body or table I dont get enough events. – Lyre

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

Ewall

thanks, we're struggling for performance on this anyway, so this is a great idea :-) – Braun

Nooo, don't use .live()!!! bitovi.com/blog/2011/04/… Use a .delegate() (or .on() if your jQuery is new enough), and delegate from the table level rather than the entire document. That will improve your performance much more than just using .live(), which will essentially just delegate from the entire document down. – Delija

And .live has been removed from jQuery 1.9 – Morbihan

Answer 2

You can also get this error when you have an infinite loop. Make sure that you don't have any unending, recursive self references.

Shellacking

That solved my issue. I've had a <a id="linkDrink" onclick="drinkBeer();">Drink</a> , and a $('#linkDrink').click(); in drinkBeer() . – Humanitarian

Answer 3

Mine was more of a mistake, what happened was loop click(i guess) basically by clicking on the login the parent was also clicked which ended up causing Maximum call stack size exceeded.

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

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

Reseda

Answer 4

This problem happened with me when I used jQUery Fancybox inside a website with many others jQuery plugins. When I used the LightBox (site here) instead of Fancybox, the problem is gone.

Banting

Answer 5

U can use

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

Reisfield

Answer 6

I recently just ran into this issue as well. I had a very large table in the dialog div. It was >15,000 rows. When the .empty() was called on the dialog div, I was getting the error above.

I found a round-about solution where before I call cleaning the dialog box, I would remove every other row from the very large table, then call the .empty(). It seemed to have worked though. It seems that my old version of JQuery can't handle such large elements.

Ronnaronnholm

Answer 7

I was getting this error because of my mistake that I forgot to declare one of the variable which was passed in Ajax data.Only mode was declaredat first.

data: {
     tmp_id: tmp_id,
     mode: mode
}

Declared the tmp_id variable also and it worked fine.

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);
    }
    });
 }

Pandit

Answer 8

   In My case It 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()<- 

Samuels

Hey, this question is already answered and is quite old. Have a look at stackoverflow.com/editing-help to properly format your answers in the future – Mislead

Answer 9

Make sure you are not accessing elements without obtaining their values. I've been able to easily reporduce this issue due to the omission of the val() function.

For example:

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

Should be

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

Laskowski

Answer 10

For me, I was trying to reference $('#inputfield') when I should have instead referencing $('#inputfield')**.val();

Dallapiccola

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Beadroll