為什么我的jQuery代碼不起作用？

Question

好吧，我知道代碼有效，因為我在其他三個頁面上都使用了它，並且效果很好，但是我繼續制作移動版本的網站。 基本上，該代碼用於實時登錄。 它序列化用戶數據，顯示“登錄”消息，然后將ajax請求發送到文件。 然后，來自該文件的響應內容將替換登錄消息，並且根據情況，會發生不同的事情。 我直接從一個工作示例中移植了代碼，現在，盡管對代碼進行了許多更改，但jquery似乎根本沒有觸發。 這是我的jQuery代碼：

function login() {
    var dataString = $('#login_form').serialize();
    console.log(dataString);
    $(".menu_login_form").html("<center>Logging in...</center>");
    $.ajax({
      type: "POST",
      url: "../include/actions/login.php",
      data: dataString,
      cache: false,
      success: function(html){
        $(".menu_login_form").html(html);
      }
    });
    return false;
  };
  $("#login_form").on("submit", login);

這是我的html代碼：

<div class="menu_login_form">
  <form id="login_form" method="post">
    <input type="text" name="username" placeholder="Username"><br>
    <input type="password" name="password" placeholder="Password" style=""><br>
    <input type="checkbox" name="remember" checked="checked" style="margin:0;margin-right:10px;margin-top:-2.5px"><span>Remember Me</span><br>
    <input type="submit" value="Login..." id="login_form_btn" class="btn">
  </form>
</div>

有人知道這是怎么回事嗎？

編輯：我現在已經開始使用它了，我只是將其放置在錯誤的位置-joeframbach我已經接受了您的回答，因為它是那里的唯一答案。 感謝您的所有建議。

Answer 1

將其包裹在准備就緒的文檔中。 這告訴jquery等待頁面完全加載后再執行任何操作。

$(function() {
function login() {
    var dataString = $('#login_form').serialize();
    console.log(dataString);
    $(".menu_login_form").html("<center>Logging in...</center>");
    $.ajax({
      type: "POST",
      url: "../include/actions/login.php",
      data: dataString,
      cache: false,
      success: function(html){
        $(".menu_login_form").html(html);
      }
    });
    return false;
};
$("#login_form").on("submit", login);
});