如何通过JavaScript/jQuery让独立于表单重载的提交按钮持续触发表单提交？

首先我得理清你的核心问题：你要把提交按钮从每次会被AJAX替换的表单区域移出来，让按钮留在页面的静态不刷新部分，同时保证每次点击按钮都能正确触发最新加载的表单提交逻辑，对吧？

先拆解你当前代码里的隐藏问题，再一步步给出解决方案：

1. 先解决最关键的坑：重复绑定事件 #

你当前的AJAX返回内容里包含了完整的<script>代码块，这会导致每次加载新问题后，submit事件会被重复绑定——点击一次按钮可能触发多次AJAX请求！所以第一步必须把返回HTML里的所有<script>标签删掉，JS逻辑只在页面初始化时加载一次，不要随AJAX返回。

2. 调整HTML结构：把提交按钮移出表单刷新区域 #

把提交按钮放到#prntqst外部的静态区域（页面不刷新的部分），示例结构如下：

<!-- 这个区域固定不刷新，存放提交按钮 -->
<div class="subbtn_contain">
    <div class="submitbtn">
        <!-- 把type从submit改成button，避免默认表单提交行为干扰 -->
        <input id="submit-quiz-btn" type="button" class="button" value="Next Question">
    </div>
</div>

<!-- 这个区域每次AJAX刷新，仅存放表单内容 -->
<div id="prntqst">
    <!-- AJAX返回的表单会插入到这里 -->
</div>

同时，你的后端someform.php返回的内容要精简，只保留表单和问题选项，不要包含提交按钮和JS代码，示例返回内容：

<font class="prntqst-text">新的问题内容？</font>

<form id="quiz" action="someform.php" method="post">
    <input type="hidden" id="next_question" name="next_question" value="3">
    <input type="hidden" id="quiz_type" name="quiz_type" value="learning">
    <input type="hidden" id="quiz_name" name="quiz_name" value="test">

    <label class="container" for="a">Ans A.
        <input type="radio" name="answers[2]" id="a" value="a">
        <span class="checkmark"></span>
    </label>
    <label class="container" for="b">Ans B.
        <input type="radio" name="answers[2]" id="b" value="b">
        <span class="checkmark"></span>
    </label>
    <!-- 其他选项... -->
</form>

3. 修改JS逻辑：绑定静态按钮的点击事件 #

因为按钮在静态区域，我们用事件委托绑定点击事件，每次点击时获取最新的#quiz表单并执行提交逻辑：

$(document).ready(function () {
    // 绑定静态提交按钮的点击事件（事件委托确保稳定触发）
    $(document).on("click", "#submit-quiz-btn", function () {
        // 找到当前页面上最新的问卷表单
        const $quizForm = $("#quiz");
        if (!$quizForm.length) {
            console.log("未找到有效的问卷表单");
            return;
        }

        console.log("触发自定义提交");
        // 执行和原submit事件一致的AJAX逻辑
        const post_url = $quizForm.attr("action");
        const form_data = $quizForm.serialize();
        
        $.post(post_url, form_data, function (response) {
            console.log(response);
            $("#prntqst").html(response);
        });
    });

    // 额外保留表单submit事件监听，处理用户按回车提交的场景
    $(document).on("submit", "#quiz", function (event) {
        event.preventDefault();
        // 直接触发按钮的点击逻辑，保持代码统一
        $("#submit-quiz-btn").click();
    });
});

为什么这样能解决问题？ #

• 事件委托$(document).on(...)把事件绑定到了document上，不管#quiz表单被AJAX替换多少次，都能正常监听；
• 静态按钮点击时总能找到当前页面最新的#quiz表单，不会因为表单被替换而失效；
• 移除了AJAX返回里的重复JS代码，彻底避免了多次绑定事件导致的重复请求；
• 保留表单的submit事件监听，覆盖了用户按回车提交的场景，体验更完整。

最后要注意的细节 #

• 删掉原表单里的onsubmit="event.preventDefault();"，我们已经用JS阻止了默认行为，留着反而可能冲突；
• 确保每次AJAX返回的表单都有正确的id="quiz"，这样JS才能准确定位；
• 如果按钮本身是页面初始化时就存在的静态元素，也可以直接用$("#submit-quiz-btn").click(function(){...})，但事件委托的写法更稳妥，能适配后续页面结构的调整。

这样调整后，不管加载多少个新问题，静态的提交按钮都能持续触发最新表单的提交逻辑啦！

备注：内容来源于stack exchange，提问作者WCVI