如何在Bootstrap模态框表单中触发Backbone事件更新用户邮箱

问题根源梳理 #

1. 事件绑定目标错误：当前把submit事件绑定到了输入框#updateEmailInput上，但表单的提交事件是触发在<form>元素上。之前仅保留输入框时回车能触发是因为浏览器默认提交了表单，但绑定对象本身不符合逻辑。
2. 按钮的data-dismiss干扰逻辑：Save按钮上的data-dismiss="modal"会在点击时立即关闭模态框，导致后续的Ajax请求和模态框弹出逻辑被中断，无法完成邮箱更新。
3. 变量引用错误：代码中this.model.set("party_contact_email", this.email);里的this.email未定义，应该使用前面获取到的email变量。

修复方案 #

1. 修正Backbone事件绑定与逻辑

将事件绑定改为表单#updateEmailForm，并修正变量错误、添加默认行为阻止，手动控制模态框关闭：

"submit #updateEmailForm": function (e) {
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault();
    
    // 正确获取输入框的邮箱值
    var email = this.$("#updateEmailInput").val();
    var dispute_name = this.model.get("dispute_name");
    
    // 修正变量引用错误
    this.model.set("party_contact_email", email);
    
    let self = this;
    this.model
        .updatePartyContactEmail(dispute_name, email)
        .done(function (response) {
            // 请求成功后再关闭更新模态框，然后弹出成功提示
            self.$("#modalUpdateEmail").modal("hide");
            self.$("#success-on-party-email-updated").modal("show");
        })
        .fail(function (err) {
            // 请求失败后同样关闭模态框，弹出错误提示
            self.$("#modalUpdateEmail").modal("hide");
            self.$("#error-on-party-contact-updated").modal("show");
        });
},

2. 修改Save按钮的HTML属性

移除按钮上的data-dismiss="modal"，让模态框在请求完成后手动关闭：

<button id="btn-save-email" type="submit" class="btn btn-primary">Save</button>

修复逻辑说明 #

• 绑定表单的submit事件后，无论是回车提交输入框还是点击Save按钮，都会触发邮箱更新逻辑。
• 移除data-dismiss避免模态框提前关闭，确保Ajax请求完整执行，之后再手动关闭更新模态框并弹出对应的提示模态框。
• 修正变量引用错误，保证邮箱值能正确传入模型和更新接口。

内容的提问来源于stack exchange，提问作者M Stone