Jquery submit()函数未执行求助：拦截表单提交失败

问题根源 #

1. DOM未就绪就绑定事件：你的jQuery提交事件绑定代码直接写在全局作用域，此时页面中的<form id="edit-assignment">还没被浏览器解析渲染，$("#edit-assignment")找不到目标元素，导致事件绑定失败。
2. 隐藏输入框代码冗余：创建隐藏输入时多写了.attr("instructions", "hidden")，这是无效属性，完全没必要保留。
3. 提交触发循环：调用this.submit()会再次触发jQuery绑定的submit事件，导致无限循环，页面无法正常完成提交流程。

修复方案 #

1. 确保DOM就绪后绑定事件 #

把jQuery的submit事件绑定代码放到$(document).ready()回调中，保证浏览器解析完所有DOM元素后再执行绑定逻辑。

2. 修正隐藏输入框代码 #

移除无效属性，同时将name属性改为符合需求的字段名（比如instructions，对应你要提交的CodeMirror内容）。

3. 避免提交循环 #

改用原生DOM的提交方式，跳过jQuery绑定的事件，防止重复触发。

完整修复后的代码 #

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script>
    var instructionsCodeMirror = null
    function configureCodeMirror() {
        const codemirror_config = {
            value: "${assignment.instructions}",
            lineNumbers: true,
            mode: "text/x-markdown",
            lineWrapping: true,
            indentWithTabs: true,
            lineWiseCopyCut: true,
            autoCloseBrackets: true,
        }
        const instructionsTextArea = document.getElementById("instructions");
        instructionsCodeMirror = CodeMirror(function (elt) {
            instructionsTextArea.parentNode.replaceChild(elt, instructionsTextArea);
        }, codemirror_config);
        instructionsCodeMirror.setSize('100%');
    }
    window.addEventListener("load", configureCodeMirror, false)
    
    // 确保DOM加载完成后再绑定事件
    $(document).ready(function() {
        $("#edit-assignment").submit( function(eventObj) {
            eventObj.preventDefault();
            console.log('intercept');
            
            // 修正隐藏输入框配置，匹配需求的字段名
            $("<input />")
                .attr("name", "instructions")
                .attr("type", "hidden")
                .val(instructionsCodeMirror.getValue())
                .appendTo(this);
            
            // 用原生DOM方法提交，避免循环触发jQuery事件
            this.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
        });
    });
</script>

额外说明 #

• 如果你的脚本放在页面<head>标签内，必须使用$(document).ready()；如果脚本放在</body>标签之前（表单元素之后），可以不用，但document.ready的写法兼容性和稳定性更强。
• 隐藏输入的name属性要和后端接收的字段名保持一致，这里改为instructions才符合你提交CodeMirror内容的需求。

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