如何使用 Bootstrap modals 和 jQuery 实现可重用的确认对话框？答案

【问题标题】：How to implement a reusable confirmation dialog with Bootstrap modals and jQuery?如何使用 Bootstrap modals 和 jQuery 实现可重用的确认对话框？
【发布时间】：2021-12-19 08:16:04
【问题描述】：

我有 2 个不同的函数希望在执行前得到确认。通常我只会为每个函数创建 2 个不同的确认对话框，但我想知道是否有办法为这两个函数使用可重用的模式对话框。

我尝试了以下方法，将要调用的函数传递给confirmDialog()。但是，它会导致函数“堆叠”以进行后续确认，因为每次调用 confirmDialog() 时事件都会绑定。我试过 unbind() 按钮，但似乎不起作用。

模态：

<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 = myfunction(myid);
  menu.confirmDialog(callbackfunc);
});
var menu = {
  confirmDialog: function (callbackfunc) {
    $("#confirmDialog").modal("show");
    $("#confirmDialog")
      .on("click", "#confirm-yes", function () {
        callbackfunc;
        $("#confirmDialog").modal("hide");
        // Tried to unbind at the end >> ('#confirm-yes').unbind();
      })
      .on("click", "#confirm-no", function () {
        $("#confirmDialog").modal("hide");
        // Tried to unbind here.
      });
  }
}

;

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您不是向按钮添加侦听器，而是向对话框添加侦听器。所以按钮上没有要删除的侦听器。此外，如果yes 按钮被点击，no 监听器将不会被解除绑定（反之亦然）。

查看 jQuery 文档，他们说 unbind() 已弃用 - 您应该改用 off()。而且您可能应该使用命名空间事件，以防万一您想添加其他侦听器。

var menu = {
  confirmDialog: function (callbackfunc) {
    const $yesButton = $("#confirm-yes");
    const $noButton = $("#confirm-no");
    $("#confirmDialog").modal("show");
    
    $yesButton.on("click.confirming", e => {
        callbackfunc();
        $yesButton.off("click.confirming");
        $noButton.off("click.confirming");
    };
    $noButton.on("click.confirming", e => {
        $yesButton.off("click.confirming");
        $noButton.off("click.confirming");
    }
  }
}

【讨论】：