Solo estoy explorando la interfaz de Semantic UI y me encontré con un evento de clic de botón en un formulario y he sido testigo de un comportamiento extraño.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Semantic UI CDN</title> <link rel="stylesheet" href="semantic.css" /> <script src="jquery.min.js"></script> <script src="semantic.js"></script> </head> <body style="margin:1em;"> <!-- Your Semantic UI Code --> <br/><br/> <h1 class="ui center aligned icon header"> First Form </h1> <form class="ui form" style=""> <div class="inline fields" id="ir_num_row_div"> <div class="three wide field required"> <label>Name</label> </div> <div class="five wide field"> <input type="text" id="name" placeholder="Your good name goes here.."> </div> </div> <div class="inline fields"> <div class="three wide field required"> <label>Place</label> </div> <div style="width: 290px;"> <input type="text" placeholder="Where are you from ?"> </div> <button style="margin:1em;" class="ui primary button" id="btn_validate">Validate</button> </div> </form> <script type="text/javascript"> $("#btn_validate").click(function(){ alert("you clicked me"); // Why page reloading here ?... }); </script> </body> </html> Después de hacer clic en el botón Validate , la página se recargará adicionalmente después de mostrar el mensaje de alerta.
¿Dónde estoy cometiendo el error aquí?
Para evitar que un elemento <button> envíe el formulario, deberá agregar un atributo type="button" .
Un extracto de <button> HTML | MDN :
escribe
El tipo del botón. Los valores posibles son:
submit: el botón envía los datos del formulario al servidor. Este es el valor predeterminado si no se especifica el atributo o si el atributo se cambia dinámicamente a un valor vacío o no válido.reset: El botón resetea todos los controles a sus valores iniciales.button: el botón no tiene un comportamiento predeterminado. Puede tener scripts del lado del cliente asociados con los eventos del elemento, que se activan cuando ocurren los eventos.menu: El botón abre un menú emergente definido a través de su elemento <menu> designado.
La etiqueta del botón debe ser un div, según este comentario: https://github.com/Semantic-Org/Semantic-UI/issues/3493#issuecomment-182349807