JQuery刷新Div后表单提交按钮失效问题求助

核心问题 #

你遇到的按钮失效问题，主要由两个原因导致：

1. HTML ID重复：表单和提交按钮都使用了TEST_ID作为ID，HTML规范要求页面内ID必须唯一，重复ID会导致浏览器DOM解析异常，破坏表单的正常提交逻辑。
2. 动态加载路径的歧义：原代码中load方法的路径写法有冗余，可能导致加载逻辑出现隐性问题。

修复步骤 #

1. 修正重复ID问题

将表单和按钮的ID改为唯一值，避免DOM解析冲突。

2. 优化jQuery加载逻辑

明确指定加载当前页面的目标内容，消除路径解析歧义。

完整修正代码

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script>
    $(window).on('load', function() {
        $('#MyButton').on('click', function(e) {
            e.preventDefault();
            // 明确加载当前页面的#Mydiv子元素
            $("#Mydiv").load(window.location.href + " #Mydiv > *");
        });
    });
</script>
</head>
<div id="Mydiv">
    <div class="container text-center">
            <!-- 表单ID改为唯一值 -->
            <form name="test_reload" id="form-test-reload" method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?>">
                <!-- 按钮ID改为唯一值 -->
                <button class="btn btn-sm btn-danger" value="TEST_ID" name='TEST_ID' id="btn-test-submit" type="submit">
                    TEST FOR FORM SUBMIT
                </button>
            </form>
        <hr />
        <h1><?php echo "TEST-RELOAD" . rand(10, 100); ?></h1>
    </div>
</div>
<button id="MyButton" class="btn btn-warning">Refresh</button>
</body>

额外说明 #

如果后续需要给动态加载的按钮添加自定义点击事件，不要直接绑定到按钮本身，而是用事件委托绑定到不会被替换的父级元素上，确保新加载的元素能触发事件：

// 事件委托示例，绑定到静态父元素#Mydiv
$('#Mydiv').on('click', '#btn-test-submit', function(e) {
    // 自定义逻辑示例
    console.log('提交按钮被点击');
});

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