Novo elemento HTML não recebe as funcionalidades Javascript

Oi Elias,

Isso ocorre porque o codigo que adiciona os eventos no JS foi executado uma vez só com os elementos originais. E quando você insere um elemento novo, ele não ganha os eventos dos irmãos automaticamente. Vc vai precisar adicionar eventos nesses elementos novamente.

As vezes isso é facil de fazer, mas depende do seu codigo e da tecnologia em uso (misturar um framework SPA com bagunças desssas por exemplo nao parece uma boa ideia).

Mas basicamente o seu codigo que cria o elemento novo precisa ir la e adicionar os eventos nesses elementos tbm logo depois.

(Outro jeito é não adicionar os eventos nos elementos dinâmicos, mas em algum pai estatico e trabalhar com delegação. É interessante, mas um pouco mais avançado. Se interessar, pesquise sobre Delegação de Eventos no JS.)

Legal Sérgio, obrigado por me responder, dei um lida sobre o assunto e nunca havia ouvido falar sobre ele. Basicamente se terceiriza o ouvinte de um evento de um elemento para um parente superior que seja estático.

Então estou usando React como tecnologia e não faço ideia de como fazer isso.

Mais no meu caso peguei um template pronto na internet, que já vem com uma javascript funcional para um menu e quando add um item no menu depois que o menu foi renderizado ele não recebe as funcionalidade do javascript, nesse caso eu teria que modificar esse javascript dele para usar Delegação de Eventos? Alguma outra sugestão?

Quando voce usa o React, idealmente voce vai deixar tudo a cargo do React pq ele cuida de tudo isso pra vc.

Entao todos os eventos devem ser adicionados pelo React e esse problema nao ocorre.

O menu que vc copiou na Web era um componente React? Ou algo normal js basico e tal? Pq ai o React pode brigar com ele sim (como parece ser o caso). A gente nem recomenda usar React e jQuery juntos por exemplo.