jquery ajax 调用未在 firefox 中执行答案

【问题标题】：jquery ajax call not executing in firefoxjquery ajax 调用未在 firefox 中执行
【发布时间】：2016-01-12 21:22:32
【问题描述】：

此问题是对this 问题和this 问题的后续问题。我无法通过 jquery 的 ajax api 发送表单字段值。代码如下：

index.html

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">

<link rel="stylesheet" type="text/css" href="index.css">

    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script type="text/javascript" src="index.js"></script>

</head>

    <body onload="welcome()">

        <div class id="main"></div>

    </body>
</html>

欢迎功能在 index.js 中实现：

index.js

function welcome()
{
    view_account();
}

function get_form_data_with_token($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });

    indexed_array['token'] = 'adafdafdgfdag';

    return indexed_array;
}

$(document).ready(function(){
    $("#changepassword_form_id").submit(function(e){
            var uri, method, formId, $form, form_data;
            // Prevent default jquery submit
            e.preventDefault();
            e.stopImmediatePropagation();

            uri = location.protocol + '//' + location.host + "/change_password";
            method = "POST";
            formId = "#changepassword_form_id";

            $form = $(formId);
            form_data = get_form_data_with_token($form);

            alert("form_data: token = " + form_data['token'] + " password3 = " + form_data['l_password3'] + " password4 = " + form_data['l_password4']);

            // Set-up ajax call
            var request = {
                url: uri,
                type: method,
                contentType: "application/json",
                accepts: "application/json",
                cache: false,
                // Setting async to false to give enough time to initialize the local storage with the "token" key
                async: false,
                dataType: "json",
                data: form_data
            };
            // Make the request
            $.ajax(request).done(function(data) { // Handle the response
                // Attributes are retrieved as object.attribute_name
                console.log("Data from change password from server: " + data);
                alert(data.message);
            }).fail(function(jqXHR, textStatus, errorThrown) { // Handle failure
                        console.log(JSON.stringify(jqXHR));
                        console.log("AJAX error on changing password: " + textStatus + ' : ' + errorThrown);
                    }
            );

    });
});

function view_account()
{
    var changePassword;

    changePassword = "<form action=\"/change_password\" id=\"changepassword_form_id\" method=\"post\">";
    changePassword = changePassword + "<br><label>Old Password: </label><input id=\"password3\" type=\"password\" name=\"l_password3\" required><br>";
    changePassword = changePassword + "<br><label>New Password: </label><input id=\"password4\" type=\"password\" name=\"l_password4\" required><br><br>";
    changePassword = changePassword + "<input type=\"submit\" value=\"Change Password\">";
    changePassword = changePassword + "</form>";

    // Replace the original html
    document.getElementById("main").innerHTML = changePassword;

}

即使使用了this 问题中提到的dom 就绪事件，onsubmit 处理程序也不会执行。

如何使用 jquery 的 ajax api 只提交一次字段？

编辑：

jsfiddle 上一个问题的示例。即使代码在 jsfiddle 上运行，它在火狐中运行时也会失败。

【问题讨论】：

你能附上一个jsfiddle吗？
它来自上一个问题，只有一个输入字段 jsfiddle.net/8g0rvgnt/7 。它适用于 jsfiddle，但不适用于 firefox。
如果每次都显示，为什么要创建用于使用 JavaScript 更改密码的表单？只需将其放入标记中即可。
这是一个简化的例子。在实际应用中不是每次都显示。
您正在将一个事件附加到一个不存在的元素。加载前准备运行。

标签： javascript jquery html ajax forms

【解决方案1】：

像这样使用on 事件处理程序：

$(document).on("submit","#changepassword_form_id",function(e){
   ...code here...
});

这代表它，因为 #changepassword_form_id 尚未在 document.ready 上定义。

由于您在输入上使用required 属性并且需要检查填写的表单，您可以使用submit 事件。

【讨论】：

这代表它，因为 #changepassword_form_id 尚未在 document.ready 上定义。
这可行，但无论是否填写表单，都会在每次点击事件时发送请求。
使用submit 事件而不是click

【解决方案2】：

您显然在 div 加载之前附加了 html dom..

下面是分步分解流程...

您正在将 .js 文件加载到 <head> 中。
您正在调用文件中的函数，该函数具有以下行，document.getElementById("main").innerHTML = changePassword; 但是，没有任何 id 为“main”的东西！！！
然后正在加载<body>，其中存在id为“main”的div。

你看到逻辑了吗？对吧？？

不要多管闲事，但这个问题是代码设计错误的结果，用任何解决方法修复它只会让你更加头疼，所以我强烈建议你更新代码设计，除非你有对代码的控制非常少，在这种情况下，补丁工作是您唯一的选择。

如果您要拼凑，您始终可以使用.off.on 事件委托，它消除了代码重新运行时事件重复的可能性。

【讨论】：