如何基于Bootstrap模态框与jQuery实现可复用确认对话框

根因说明 #

• 事件重复绑定：每次调用confirmDialog方法时都会为确认、取消按钮新增一次点击事件绑定，旧绑定不会自动清除，导致点击确认时会触发之前所有传入的回调函数
• 回调传递错误：var callbackfunc = myfunction(myid); 是直接执行myfunction后将返回值赋值给变量，并未将函数本身作为回调传入
• 回调未执行：确认按钮的事件处理逻辑中仅写了callbackfunc，没有加括号调用，就算传入正确的函数也不会执行

修复代码 #

模态框HTML（无改动） #

<div class="modal fade" id="confirmDialog" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Confirm Cancel?</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="confirm-yes">Yes</button>
                <button type="button" class="btn btn-secondary" id="confirm-no">No</button>
            </div>
        </div>
    </div>
</div>

JavaScript代码 #

$("#btn-cancel-alert").on("click", function () {
  var myid = $(this).val();
  // 用匿名函数包裹执行逻辑，传递函数引用而非直接执行
  var callbackfunc = function() {
    myfunction(myid);
  };
  menu.confirmDialog(callbackfunc);
});
var menu = {
  confirmDialog: function (callbackfunc) {
    $("#confirmDialog").modal("show");
    // 先解绑之前的点击事件，避免重复绑定
    $("#confirmDialog").off("click", "#confirm-yes").off("click", "#confirm-no");
    $("#confirmDialog")
      .on("click", "#confirm-yes", function () {
        // 执行传入的回调
        callbackfunc();
        $("#confirmDialog").modal("hide");
      })
      .on("click", "#confirm-no", function () {
        $("#confirmDialog").modal("hide");
      });
  }
}

扩展优化（可选） #

如果需要适配多个不同的确认场景，可以扩展参数支持自定义弹窗内容：

var menu = {
  // 新增自定义配置参数，支持设置标题、按钮文字
  confirmDialog: function (callbackfunc, title = "操作确认", yesText = "确认", noText = "取消") {
    $("#confirmDialog .modal-title").text(title);
    $("#confirm-yes").text(yesText);
    $("#confirm-no").text(noText);
    $("#confirmDialog").modal("show");
    $("#confirmDialog").off("click", "#confirm-yes").off("click", "#confirm-no");
    $("#confirmDialog")
      .on("click", "#confirm-yes", function () {
        callbackfunc();
        $("#confirmDialog").modal("hide");
      })
      .on("click", "#confirm-no", function () {
        $("#confirmDialog").modal("hide");
      });
  }
}
// 不同场景调用示例
// 删除场景
menu.confirmDialog(deleteCallback, "确认删除该数据吗？", "删除", "取消");
// 提交场景
menu.confirmDialog(submitCallback, "确认提交表单吗？", "提交", "返回修改");

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