点击按钮触发Uncaught RangeError: Maximum call stack size exceeded问题求助

我看了你的代码，发现几个可能导致栈溢出错误的点，咱们一步步来解决：

首先修正最明显的问题：阻止按钮的默认行为 #

你之前把return false放在了$(document).ready的回调函数末尾，这完全起不到阻止按钮默认行为的作用。如果#add1是表单里的提交按钮，点击它会触发浏览器默认的表单提交动作，导致页面刷新，这可能间接引发重复事件绑定或者循环操作，进而触发栈溢出。

把代码改成这样，把阻止默认行为的逻辑放到点击事件的回调里：

<script>
$(document).ready(function(){ 
  // 先移除之前绑定的点击事件，避免重复绑定
  $( "#add1" ).off('click').on('click', function(e){ 
    // 阻止按钮的默认行为（比如表单提交）和事件冒泡
    e.preventDefault();
    e.stopPropagation();
    
    var nom1 = $('#nom1').val(); 
    var cont1 = $('#con1').val(); 
    var part1 = $('#par1').val(); 
    var coup1 = $('#coup1').val(); 
    
    $.ajax({ 
      type:'POST', 
      data:{nom1:nom1, con1:cont1, par1:part1, coup1:coup1}, 
      url:'{{path('equipe_add')}}',
      // 加上错误回调，方便排查AJAX请求的问题
      error: function(xhr, status, error) {
        console.error('AJAX请求出错:', error);
      }
    }); 
  }); 
}); 
</script>

再排查其他可能的原因 #

1. 重复绑定点击事件：如果这段脚本被多次执行（比如AJAX响应里又加载了这段代码），每次执行都会给#add1绑定一次点击事件，点击一次按钮就会触发多次AJAX请求，极端情况下会引发栈溢出。上面的代码用.off('click').on('click', ...)先移除旧事件再绑定新的，就能避免这个问题。
2. 页面存在多个相同ID的元素：检查页面里是不是有多个元素用了id="add1"，ID必须是唯一的，多个相同ID会让jQuery选中所有匹配元素，绑定多份事件，可能导致冲突。
3. 其他脚本的事件冲突：看看有没有其他脚本也给#add1绑定了点击事件，比如某个事件里又主动触发了按钮的点击，形成无限循环。
4. 查看调用栈定位问题：打开浏览器开发者工具（按F12），切换到「控制台」标签，触发错误后，点击错误信息里的调用栈，就能看到是哪个函数在无限递归，精准找到问题根源。

内容的提问来源于stack exchange，提问作者MANAI Iheb