提交按钮需点击两次才执行JS脚本的问题排查求助

嘿，这个点击两次才触发JS的问题我碰到过好几次，大概率是表单默认提交行为搞的鬼，或者事件绑定的时机不对。结合你给的代码片段，我给你几个靠谱的修复方案：

1. 先阻止表单的默认提交行为 #

当你点击表单的提交按钮时，浏览器会自动触发表单的默认提交动作（跳转到action指定的地址），这会直接打断你的JS脚本执行——第一次点击其实是触发了页面跳转，只是可能因为某些原因没跳成，第二次点击时JS才真正生效。

推荐方案：监听表单的submit事件 #

在你的js-scripts.js里添加这段代码：

// 等页面DOM元素都加载完再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 找到页面里的表单（根据你的HTML结构调整选择器）
  const targetForm = document.querySelector('#tot-op form');
  if (targetForm) {
    targetForm.addEventListener('submit', function(e) {
      // 阻止浏览器的默认提交行为
      e.preventDefault();
      
      // 这里写你要执行的逻辑：发送数据、处理业务
      sendFormData(); // 假设这是你封装的发送数据函数
    });
  }
});

备选方案：监听按钮的click事件 #

如果你的逻辑是绑定在按钮上的，也要记得阻止默认行为：

document.addEventListener('DOMContentLoaded', function() {
  const submitBtn = document.querySelector('#tot-op input[type="submit"]');
  if (submitBtn) {
    submitBtn.addEventListener('click', function(e) {
      e.preventDefault();
      
      // 执行你的脚本逻辑
      sendFormData();
    });
  }
});

2. 确认事件绑定的时机 #

如果你的JS脚本在页面DOM还没加载完成时就执行了，会导致第一次点击时事件根本没绑定上——第二次点击时DOM已经加载完毕，事件才生效。

解决这个问题的核心就是让事件绑定代码在DOM加载完成后执行：

• 要么用上面代码里的DOMContentLoaded事件包裹逻辑
• 要么把你的<script src="js-scripts.js"></script>标签移到</body>的末尾，这样页面元素加载完才会执行JS

3. 检查表单的action属性 #

你给出的代码里form action="<?php e没写完，要确保这个属性的输出是正确的：

• 如果不需要表单默认提交到后端，可以把action设为#或者空字符串，避免不必要的页面跳转：

<form action="#" method="post">
  <!-- 你的表单控件 -->
  <button type="submit">提交</button>
</form>

修复完成后，你再点击提交按钮，应该就能直接触发JS脚本发送数据，不用点第二次啦。

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