jquery .on gets Uncaught RangeError: Maximum call stack size exceeded

Question

I read almost every SO question about

Uncaught RangeError: Maximum call stack size exceeded.

but non worked for me.

My problem is that I'm changing some div text after loading it, which is working with me. However, the console is displaying the Uncaught RangeError error. this is my JS:

<script type="text/javascript">
            $('#report-error').on("DOMNodeInserted DOMCharacterDataModified" ,function(){
                $('#report-error').text("error happened");

            });           
 </script>

and this is my HTML after the jquery had been applied:

<div id="report-error" class="report-div error" 
style="display: block;">error happened
</div>

Any help would be appreciated.

if you can create the issue in jsfiddle..it would be helpful for us to look into it, else we don't have any thing to debug ....hope u got the point — iJade, Oct 17 '13 at 08:18
You need to trigger the event first to replicate the problem: http://jsfiddle.net/u7nU5/1/ — David Hellsing, Oct 17 '13 at 08:21
Check this out: http://stackoverflow.com/questions/3483895/infinite-loop-in-functional-programming — emerson.marini, Oct 17 '13 at 08:22
@David - I'm sorry, but I didn't get the point. can you justify? — mamdouh alramadan, Oct 17 '13 at 08:26

David Hellsing · Accepted Answer · 2013-10-17T08:40:25.577

4

The error happens because the DOMNodeInserted event is triggered when you run the jQuery method .text(), since this method inserts a text node into the container.

So in short - the handler will invoke it’s own event...

You could solve it by using one instead of on, but the side effects depends on the rest of your logic.

$('#report-error').one("DOMNodeInserted" ,function(){
    $('#report-error').text("error happened");
});

edited Oct 17 '13 at 08:40

answered Oct 17 '13 at 08:20

David Hellsing

106,495
44
176
212

Infinite loop through tail recursion. – emerson.marini Oct 17 '13 at 08:21
1

+1 Great point, but is it solvable, or should I just leave it as it is with no harm included?! – mamdouh alramadan Oct 17 '13 at 08:25
@mamdouhalramadan I added a possible solution. – David Hellsing Oct 17 '13 at 08:27
@David - `.one` works fine for 1 time per event. then, my function will not be triggered. – mamdouh alramadan Oct 17 '13 at 08:30
@mamdouhalramadan OK then, well now that you know what the problem is I’m sure you can figure out a solution... using a different DIV for error reporting comes to mind. – David Hellsing Oct 17 '13 at 08:32

jquery .on gets Uncaught RangeError: Maximum call stack size exceeded

1 Answers1