Archive for outubro, 2010

12 de outubro de 2010

Adicionando eventos a elementos dinâmicos com jQuery

por adlerparnas

Fala galera! Hoje venho falar de um recurso que o jQuery possui que salva vidas 😀

Quantas vezes criamos elementos HTML utilizando Javascript e ainda precisamos adicionar funções para os eventos a esses elementos? Quem gosta de RIA utilizando Javascript sabe disso.

Digamos que temos um menu e que os cliques são tratados por uma função “trataClick”. Nosso arquivo HTML e Javascript ficaria assim:

arquivo.html

<html>
 <header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="scripts.js" type="text/javascript"><!--mce:1--></script>
</header>
 <body>
 <ul id="main_menu">
<li><a href="#item1">Item 1</a></li>
<li><a href="#item2">Item 2</a></li>
<li><a href="#item3">Item 3</a></li>
<li><a href="#item4">Item 4</a></li>
 </ul>
 </body>
</html>

scripts.js

//função que trata os cliques no menu
function trataClick(){
alert(this);
}

$(function(){
$('#main_menu a').click(trataClick);
});

Tudo funcionando! Mas e se  tivessemos que adicionar novos itens ao menu? Você teria que adicionar a função ao evento click dos novos elemento. Digamos que nosso menu seja construido via AJAX:

$.ajax({
url: "meuController.php",
type: 'POST'
success: function(data){
//removendo todos os filhos do menu
$('#main_menu').find('li').remove();
//incluindo novos itens no menu
$('#main_menu').append(data);
//adicionando a função aos novos elementos
$('#main_menu a').click(trataClick);
},
error: function(){
alert("Não foi possível recuperar o menu");
}
});

Aqui vem o pulo do gato! 😀 A biblioteca jQuery possui uma função “live” que atribui o evento a todos os elementos que estão na página mesmo os que são criados depois da chamada, livrando-nos da obrigação de adcionar a função ao evento toda vez que novos elementos são criados.

$('#main_menu a').live('click', function(){alert('clicou')});

É isso ai pessoal! Espero que essa dica seja útil pra vocês quanto é pra min. Espero comentários e caso tenha dito algo errado sintam-se à vontade para me corrigir. Abraços e até a próxima dica.