Los eventos de JavaScript no se activan después de agregar un elemento dinámico

Te encuentras con un problema en el que los eventos de JavaScript no se activan después de agregar nuevos elementos al DOM . Esto se debe a que jQuery solo reconoce los elementos presentes cuando se ejecuta inicialmente durante la carga de la página.

Para resolver esto, debe emplear la delegación de eventos para capturar eventos de elementos dinámicos. La delegación de eventos implica capturar eventos en un nivel superior en el DOM que ya estaba allí durante la carga de la página. Esto permite que los eventos de los elementos recién agregados surjan y sean manejados.

En su caso, puede delegar el evento de clic a un elemento principal que estuvo presente durante la carga de la página. Por ejemplo, puede cambiar su código JavaScript para usar el método on() de la siguiente manera:

$(document).on('click', '.races', function(e) {
  // Your code here
});

De esta manera, cualquier elemento nuevo agregado con la clase ".races" heredará el controlador de eventos de clic. Recuerde utilizar el método on() en lugar de click() al implementar la delegación de eventos.