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 respostasSuponha 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.