javascript - 单个 JS 文件中的两个 AJAX 表单提交，只有一个有效

Question

在 HTML 中，表单看起来相同，只是表单 ID 发生了变化。我使用这个 JS 文件通过 AJAX 提交表单:

$("#change-password").submit(function(e) {
    var url = "http://domain/actions"; 
    $.ajax({
        type: "POST",
        url: url,
        data: $("#change-password").serialize(), 
        success: function(data) {
            $("div.change-password-response").html(data);
        }
    });
    e.preventDefault(); 
});

$("#change-email").submit(function(e) {
    var url = "http://domain/actions"; 
    $.ajax({
        type: "POST",
        url: url,
        data: $("#change-email").serialize(), 
        success: function(data) {
            $("div.change-email-response").html(data);
        }
    });
    e.preventDefault(); 
});

HTML 部分

                <div class="col-md-6 col-sm-6 add_bottom_30">
                    <h4>Schimbare parola</h4>
                    <form id="change-password" method="post">
                    <div class="form-group">
                        <label>Parola veche</label>
                        <input class="form-control" name="old_password" id="old_password" type="password" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>Parola noua</label>
                        <input class="form-control" name="new_password" id="new_password" type="password" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>Confirma parola noua</label>
                        <input class="form-control" name="confirm_new_password" id="confirm_new_password" type="password" autocomplete="off">
                    </div>
                    <input type="hidden" name="action" value="change-password">
                    <button type="submit" class="btn_1 green">Actualizeaza parola</button>
                    <div class="change-password-response form-response"></div>
                    </form>
                </div>

                <div class="col-md-6 col-sm-6 add_bottom_30">
                    <h4>Schimbare adresa email</h4>
                    <form id="change-email" method="post">
                    <div class="form-group">
                        <label>Email vechi</label>
                        <input class="form-control" name="old_email" id="old_email" type="text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>Email nou</label>
                        <input class="form-control" name="new_email" id="new_email" type="text" autocomplete="off">
                    </div>
                    <div class="form-group">
                        <label>Confirma email nou</label>
                        <input class="form-control" name="confirm_new_email" id="confirm_new_email" type="password" autocomplete="off">
                    </div>
                    <input type="hidden" name="action" value="change-email">
                    <button type="submit" class="btn_1 green">Actualizeaza Email</button>
                    <div class="change-email-response form-response"></div>
                    </form>
                </div>

现在，我的问题是表单 1 正在工作，表单 2 没有触发 AJAX 并且像正常表单一样工作。我做错了什么？

Answer 1

检查#change-email是否有其他绑定(bind)事件。

在 Firebug 中，检查 #change-email 元素并转到 Event 选项卡。
在 Chrome 中，检查该元素并转到Event Listeners 选项卡。

您将看到所有绑定(bind)的事件和相应的回调函数。

如果没有帮助，请尝试从Console手动提交表单

1. 检查表单，然后运行
2. $($0).submit();

如果它能工作，看起来你的按钮上有一些事件。