jquery on() 方法超过最大调用堆栈大小答案

【问题标题】：jquery on() method Maximum call stack size exceededjquery on() 方法超过最大调用堆栈大小
【发布时间】：2017-04-01 05:17:19
【问题描述】：

为什么会出现这个错误：

未捕获的 RangeError：超出最大调用堆栈大小

这是我的代码：

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

【问题讨论】：

'因为在focusout 上，你调用.blur()，它引发focusout，它调用.blur()，它引发focusout，它调用.blur()，它引发focusout，它调用.blur()引发focusout 调用.blur() 引发focusout 调用.blur() ....等
$(this).blur();执行focusout事件，无限次调用

标签： javascript jquery error-handling

【解决方案1】：

正如其他人提到的那样，您有效地导致了递归调用。一个简单的解决方法是添加一个哨兵变量来阻止它递归：

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

【讨论】：

或检查$(":focus") - stackoverflow.com/questions/497094/…
@freedomn-m：是的，当然也适用于检查当前焦点。我的是一个通用的哨兵包装器，用于任何类型的事件。
我试过你的代码，但它给了我同样的错误！ @GoneCoding
@mohamedyoussouf：您是否 100% 确定您使用的代码完全符合所示（并且硬刷新了您的浏览器）？这是非常基本的东西。