javascript - jquery on() 方法超出最大调用堆栈大小

Question

为什么我会收到此错误:

Uncaught RangeError: Maximum call stack size exceeded

这是我的代码:

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

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