jQuery, corrigindo problemas de .click () adicionando conteúdo

(Isso se aplica a .load (), .append (), .prepend (), .html () e muitas outras funções)

Muitos têm usado a função .load () do jQuery para atualizar o conteúdo da página, de uma seção ou mostrar outra página ou site sem ter que atualizar a página ou redirecionar o usuário.

Mas se tivéssemos algo assim:

$('#welcomeBtn').click(function(){
    alert('Welcome!');
})

$('#loadWelcome').click(function(){
     $('#someDiv').load('url.com #welcomeBtn');
})

Com isso, ao carregar o botão, ao clicar nele, nada será mostrado. Porque o javascript (e jQuery obviamente) que foi carregado não se aplicará ao futuro.

Para corrigir isso, você só precisa alterar o #welcomeBtn .click () assim:

$(document).on('click', '#welcomeBtn', function(){
     alert('Welcome!');
})

Este é apenas um exemplo simples e talvez inútil, porque poderíamos usar a função .show (), mas você poderia carregar mais conteúdo, quando você adiciona um comentário, por exemplo, e esse comentário tem um botão curtir.

Aproveitar!