为何我的jQuery脚本无法运行？点击提交按钮无法隐藏表单

你的代码里有两个关键问题导致脚本无法正常工作，我来帮你一一解决：

1. jQuery库加载顺序错误 #

你把自定义的main.js放在jQuery库之前引入了——这时候浏览器执行main.js里的jQuery代码时，$这个jQuery的核心对象还没被定义，脚本直接就报错失效了。必须先加载jQuery库，再加载你的自定义脚本。

2. 未阻止表单的默认提交行为 #

就算脚本能正常运行，点击提交按钮后，浏览器会默认触发表单的提交动作，页面会跳转到action指定的地址，这时候你刚执行的hide()效果会被页面刷新直接覆盖，根本看不到。所以需要在点击事件里阻止这个默认行为。

修正后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <!-- 先加载jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 再加载自定义脚本 -->
    <script type="text/javascript" src="main.js"></script>
    <title></title>
</head>
<body>
    <form action="/database.php" method="POST" id="form1">
        <div class="input">
            <p>Enter player names, separated by commas:</p>
            <input type="text" name="input_players">
        </div>
        <div class="input">
            <p>Enter game name:</p>
            <input type="text" name="input_game">
        </div>
        <div class="submit">
            <input type="submit" name="submit" value="Submit" id="submit">
        </div>
    </form>
</body>
</html>

jQuery部分（main.js） #

$(document).ready(function(){
    // 直接绑定到提交按钮的ID上，避免选中其他input元素
    $("#submit").click(function(e){
        // 阻止表单默认提交行为
        e.preventDefault();
        $("#form1").hide();
        
        // 如果需要提交表单数据，可以在这里用AJAX发送
        // 示例：
        // $.post("/database.php", $("#form1").serialize(), function(response){
        //     // 处理提交后的回调逻辑
        // });
    });
});

另外补充一点：原来的选择器$("input")会选中页面上所有的input元素（包括两个文本输入框），这显然不是你想要的——点击文本框也会触发隐藏表单的动作，所以直接用提交按钮的ID#submit来绑定事件更准确。

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