爲什麼我的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); 
});