Este es mi HTML (el problema se describe a continuación):

 //Form 1 is called through a modal that is disconnected from form 2: <div class="modal"> <form action="/user" method="POST" id="form-1"> <input type="text" id="username" name="username"> <button>Submit</button> </form> </div> //Form 2 is appended in #form-1 listener <div id="user-info" class="user-details"> <p>Username: <%= user.username %></p> <% if(user.email) { %> <p>Email: <%= user.email %></p> <% } else { %> <form action="/user?_method=PATCH" method="POST" id="form-2"> <input type="email" id="user-email" name="user-email"> <button>Submit</button> </form> <% } %> </div>

Los dos oyentes/llamadas ajax:

 $('#form-1').submit(function(e) { e.preventDefault(); const user = $(this).serialize(); $.post('/user', user, function(data) { $('#user-info').append( `<p>Username: ${data.username}</p> <form action="/user?_method=PATCH" method="POST" id="form-2"> <input type="email" id="user-email" name="user-email"> <button>Submit</button> </form>` ) }); }); $('#form-2').submit(function(e) { e.preventDefault(); const user = $(this).serialize(); $.ajax({ url: '/user', data: user, type: 'PATCH', success: function(data) { $('#user-info').append( `<p>Username: ${data.username}</p> <p>Email: ${data.email}</p>` ) } }); });

El primero ( #form-1 ) se ejecuta sin problemas. Sin embargo, el segundo ( #form-2 ) nunca se ejecuta a pesar de que es el único que se llama. Solo funciona cuando comento el primero (en otras palabras, cuando lo coloco al principio del archivo de script. Creo que el segundo está siendo ignorado. ¿Hay alguna forma de escuchar ambos formularios simultáneamente?