jQuery Uncaught RangeError: Maximum call stack size exceeded -Jquery

Question

I am getting error

Uncaught RangeError: Maximum call stack size exceeded

my jQuery function:

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

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?

What is foo? This code doesn't tell anything about the error — Lixus
I think we need to see what foo is... call stack size exceeded means your function (or some other function like foo) ends up calling itself over and over. If you trigger a click on your td down the line for instance. — arbuthnott
"tens of thousands of cells in the page" Is that ... really ... necessary? — Patrick Q

arbuthnott arbuthnott · Accepted Answer · 2017-10-06T18:42:06

If you really have (need?) thousands of tds on your page, I imagine it would lighten up the computation load to add a single click listener to an ancestor element instead of adding a click listener to every single td. For example:

$('table').on('click', 'td', function () {
    var $tabledata = $(ev.target).closest('td');
    if ($tabledata.context.id != null && $tabledata.context.id != '') {
        foo($('#docId').val(), $tabledata.attr('id'));
    }
    return false;
});

I think this would lighten the load at the time the handlers are added, but possibly not when they fire. If you have other issues causing your error (for example in the method foo), we would need to see the code to clear those up.

jQuery Uncaught RangeError: Maximum call stack size exceeded -Jquery

1 Answers