No jQuery, como anexar eventos a elementos html dinâmicos? [duplicado]

Esta questão já tem uma resposta aqui:

Ligação de evento em elementos criados dinamicamente? 23 respostas

Suponha que eu tenha algum código jQuery que conecte um manipulador de eventos a todos os elementos com a classe "myclass". Por exemplo:

$(function(){
    $(".myclass").click( function() {
        // do something
    });
});

E meu html pode ser o seguinte:

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

Isso funciona sem problema. No entanto, considere se os elementos "myclass" foram gravados na página em algum momento futuro.

Por exemplo:

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

Nesse caso, o link "test4" é criado quando um usuário clica em # anchor1.

O link "test4" não tem o manipulador click () associado a ele, mesmo que tenha class = "myclass".

Alguma ideia de como posso consertar isso?

Basicamente, eu gostaria de escrever o manipulador click () uma vez e aplicá-lo ao conteúdo presente no carregamento da página e ao conteúdo trazido posteriormente via Ajax / DHTML.

questionAnswers(8)

yourAnswerToTheQuestion