Eventos JavaScript não são acionados após acréscimo de elemento dinâmico

Você está encontrando um problema em que eventos JavaScript não são acionados após anexar novos elementos ao DOM . Isso ocorre porque o jQuery só reconhece os elementos presentes quando ele é executado inicialmente durante o carregamento da página.

Para resolver isso, você precisa empregar a delegação de eventos para capturar eventos de elementos dinâmicos. A delegação de eventos envolve a captura de eventos em um nível superior no DOM que já existiam durante o carregamento da página. Isso permite que eventos de elementos recém-adicionados surjam e sejam manipulados.

No seu caso, você pode delegar o evento de clique a um elemento pai que estava presente durante o carregamento da página. Por exemplo, você pode alterar seu código JavaScript para usar o método on() da seguinte forma:

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

Dessa forma, quaisquer novos elementos adicionados com a classe ".races" herdarão o manipulador de eventos click. Lembre-se de usar o método on() em vez de click() ao implementar a delegação de eventos.