如何使用Bootstrapmodals和jQuery實作可重用的確認對話框？-有解無憂

我有 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.
      });
  }
}

;

uj5u.com熱心網友回復：

您不是向按鈕添加偵聽器，而是向對話框添加偵聽器。所以按鈕上沒有要洗掉的偵聽器。此外，如果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");
    }
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360348.html

標籤：javascript 查询推特引导

上一篇：如何在Bootstrap5中使用帶有標題標簽的大文本面包屑？

下一篇：C 確保物件在執行函式時存在