Tengo 2 funciones diferentes que me gustaría tener una confirmación antes de la ejecución. Normalmente, solo crearía 2 diálogos de confirmación diferentes para cada función, pero me pregunto si hay una manera de utilizar un diálogo modal reutilizable para ambas funciones.
Intenté lo siguiente donde pasaría la función que se llama para confirmarDialog(). Sin embargo, haría que la función se 'apilara' para confirmaciones posteriores, ya que el evento se vincularía cada vez que se llama a confirmDialog(). He intentado desvincular() de los botones pero parece que no funciona.
Modal:
<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. }); } };
No está agregando oyentes a los botones, está agregando oyentes al cuadro de diálogo. Por lo tanto, no hay oyentes en los botones para eliminar. Además, si se hace clic en el botón yes , el detector no no se desvinculará (y viceversa).
Al mirar los documentos de jQuery, dicen que unbind() está en desuso; debería usar off() en su lugar. Y probablemente debería usar eventos con espacio de nombres en caso de que en algún momento desee agregar otros oyentes.
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"); } } }