Esto no es tanto un problema, ya que conozco la solución, como un deseo de entender cuál es realmente el problema. Tome este ejemplo mínimo:
document.getElementById("testForm").addEventListener('submit', (event) => { event.preventDefault(); document.getElementById("main").innerHTML += '<p>submitted</p>'; }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>Title</title> </head> <body> <main id="main" class="main"> <form id="testForm"> <input type="submit" name="submit"> </form> </main> </body> </html> Se supone que esto debe agregar "<p>submitted</p>" a #main en el envío. En el primer clic, funciona como se esperaba. En el segundo clic, el navegador parece perder mi detector de eventos y vuelve al comportamiento predeterminado. Recarga la página con una consulta.
Al modificar ligeramente el código para agregar un contenedor hermano y agregarlo, podemos hacer que esto funcione como se esperaba.
document.getElementById("testForm").addEventListener('submit', (event) => { event.preventDefault(); document.getElementById("response").innerHTML += '<p>submitted</p>'; }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>Title</title> </head> <body> <main id="main" class="main"> <form id="testForm"> <input type="submit" name="submit"> </form> <div id="response"></div> </main> </body> </html>Así que sé la solución, pero no entiendo el problema.
Cuando modifica el innerHTML de un elemento, está eliminando todos los detectores de eventos en sus elementos secundarios.
Esto se debe a que se debe volver a analizar toda la etiqueta, perdiendo detectores de eventos en el proceso.