Блог

У меня есть 2 разные функции, которые я хотел бы получить подтверждение перед выполнением. Обычно я бы просто создал 2 разных диалоговых окна подтверждения для каждой функции, но мне интересно, есть ли способ использовать повторно используемый модальный диалог для обеих функций.

Я попробовал следующее, где я передал бы функцию, вызываемую для подтверждения DIALOG(). Однако это приведет к тому, что функция будет «складываться» для последующих подтверждений, поскольку событие будет связываться каждый раз при вызове confirmDialog (). Я пробовал отстегнуть() кнопки, но это, похоже, не работает.

Модальный:

 lt;div class="modal fade" id="confirmDialog" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false"gt;  lt;div class="modal-dialog" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-header"gt;  lt;div class="modal-title"gt;Confirm Cancel?lt;/divgt;  lt;/divgt;  lt;div class="modal-footer"gt;  lt;button type="button" class="btn btn-primary" id="confirm-yes"gt;Yeslt;/buttongt;  lt;button type="button" class="btn btn-secondary" id="confirm-no"gt;Nolt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  

язык 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 gt;gt; ('#confirm-yes').unbind();  })  .on("click", "#confirm-no", function () {  $("#confirmDialog").modal("hide");  // Tried to unbind here.  });  } }  

;

Вы не добавляете слушателей к кнопкам, вы добавляете слушателей в диалоговое окно. Таким образом, на кнопках нет прослушивателей, которые нужно удалить. Кроме того, если 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 =gt; {  callbackfunc();  $yesButton.off("click.confirming");  $noButton.off("click.confirming");  };  $noButton.on("click.confirming", e =gt; {  $yesButton.off("click.confirming");  $noButton.off("click.confirming");  }  } }