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

为什么我收到此错误:



这是我的代码:

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

最佳答案

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

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