jQuery提交处理器中调用submit触发栈溢出错误求助

问题根源 #

你绑定的表单submit事件处理函数中，调用$(this).submit()会再次触发同一个事件处理函数，形成无限递归调用，最终导致调用栈超出上限，抛出Uncaught RangeError: Maximum call stack size exceeded错误。

解决方案 #

直接调用表单DOM元素的原生submit()方法，绕开jQuery的事件绑定逻辑，这样不会触发你定义的事件处理函数，也就不会产生递归。

修改后的完整代码：

$('form#form').submit(function(e) {
  e.preventDefault();
  let gambarTersisa = [];
  let gambarNodes = document.querySelectorAll('span[contenteditable] img, figure[contenteditable] img');
  for (let index = 0; index < gambarNodes.length; index++) {
    gambarTersisa[index] = gambarNodes[index].src;
  }
  $(this).append($("<input>")
    .attr('type', 'hidden')
    .attr('name', 'gambar')
    .attr("value", gambarTersisa)
  );
  // 改用原生DOM方法提交，避免触发jQuery绑定的submit事件
  this.submit();
});

补充说明 #

• jQuery的$(element).submit()方法会触发所有绑定在该元素上的submit事件处理器，包括你自己定义的这个，所以会陷入递归。
• 原生DOM元素的submit()方法只会直接执行表单提交的默认行为，不会触发任何绑定的事件处理器，完美解决递归问题。

内容的提问来源于stack exchange，提问作者CoolWolf Entertainment