Estoy tratando de entender por qué el formulario en el siguiente fragmento se envía varias veces, después de seguir los pasos:
div de confirmación.Cancel en la confirmación.Yes en la confirmación.¿Alguien puede ayudarme a ver cómo/por qué sucede esto, de modo que pueda evitar envíos múltiples?
const $form = $("#form-test"); const $confirm = $("#confirm"); $form.on("submit", function (e, $btn) { e.preventDefault(); console.log("Submitting!", $btn); }); $confirm.find("button").on("click", function () { $confirm.hide(); }); $form.find("button").on("click", function (e) { const $btn = $(this); $("#btn-yes").one("click", function () { $form.trigger("submit", $btn); }); $("#btn-cancel").one("click", function () { console.log("Cancelled!", this); }); $confirm.show(); }); #form-container, #confirm { border: 1px solid #000; padding: 10px; } #confirm { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="confirm"> Are you sure? <button id="btn-cancel" type="button">Cancel</button> <button id="btn-yes" type="button">Yes</button> </div> <div id="form-container"> <form id="form-test"> <input type="text" name="test" value="Foo"> <button type="button">Submit 1</button> <button type="button">Submit 2</button> </form> </div>Estás ejecutando lo siguiente:
$("#btn-yes").one("click", function () { $form.trigger("submit", $btn); }); dentro del $form.find("button").on("click" . Si hace clic en los botones dos veces, agregará el controlador dos veces.
Quite el controlador anterior antes de agregar el nuevo, o agregue los controladores sí/cancelar fuera (no es necesario que se agreguen dentro del controlador de clic).
const $form = $("#form-test"); const $confirm = $("#confirm"); $form.on("submit", function(e) { e.preventDefault(); console.log("Submitting!"); }); $confirm.find("button").on("click", function() { $confirm.hide(); }); $("#btn-yes").one("click", function() { $form.trigger("submit"); }); $("#btn-cancel").one("click", function() { console.log("Cancelled!", this); }); $form.find("button").on("click", function() { $confirm.show(); }); #form-container, #confirm { border: 1px solid #000; padding: 10px; } #confirm { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="confirm"> Are you sure? <button id="btn-cancel" type="button">Cancel</button> <button id="btn-yes" type="button">Yes</button> </div> <div id="form-container"> <form id="form-test"> <input type="text" name="test" value="Foo"> <button type="button">Submit 1</button> <button type="button">Submit 2</button> </form> </div>