jquery on() method Maximum call stack size exceeded

Question

Why I am getting this error:

Uncaught RangeError: Maximum call stack size exceeded

Here is my code:

$(document).on('keypress focusout', '.checklist-item-input', function (e) {
  if (e.which == 13 || e.type == 'focusout') {
    $('.checklist-item').removeClass('edit');
    $(this).siblings('.checklist-item-detail').text($(this).val());
    $(this).blur();
    $('.checklist-item-detail').each(function () {
      if (!$(this).text().length) {
        $(this).closest('.checklist-item').parent().remove();
      }
    });
  }
});

'Cause on `focusout` you call `.blur()` which raises `focusout` which calls `.blur()` which raises `focusout` which calls `.blur()` which raises `focusout` which calls `.blur()` which raises `focusout` which calls `.blur()` which raises `focusout` which calls `.blur()` .... etc — freedomn-m, Nov 17 '16 at 15:26
`$(this).blur();` executes the focusout event, infinite times called — Kevin Kloet, Nov 17 '16 at 15:26

score 1 · Answer 1 · answered Nov 17 '16 at 15:31

1

As others mentioned you effectively cause a recursive call. One simple fix is to add a sentinel variable to stop it going recursive:

var busy = false;
$(document).on('keypress focusout', '.checklist-item-input', function (e) {
  if (!busy && e.which == 13 || e.type == 'focusout') {
    busy = true;
    $('.checklist-item').removeClass('edit');
    $(this).siblings('.checklist-item-detail').text($(this).val());
    $(this).blur();
    $('.checklist-item-detail').each(function () {
      if (!$(this).text().length) {
        $(this).closest('.checklist-item').parent().remove();
      }
    });
    busy = false;
  }
});

answered Nov 17 '16 at 15:31

iCollect.it Ltd

92,391
25
181
202

Or check for `$(":focus")` - http://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus – freedomn-m Nov 17 '16 at 15:57
@freedomn-m: Yes, certainly also valid to check for current focus. Mine was a generic sentinel wrapper used for any type of event. – iCollect.it Ltd Nov 17 '16 at 16:33
I tried your code but it give me the same error! @GoneCoding – mohamed youssouf Nov 19 '16 at 09:23
@mohamedyoussouf: Are you 100% certain you used the code exactly as shown (and hard-refreshed your browser)? This is pretty basic stuff. – iCollect.it Ltd Nov 21 '16 at 10:58

jquery on() method Maximum call stack size exceeded

1 Answers1