O método .live() do jQuery

Caras, como fico impressionado, ao pesquisar por algum assunto que eu gostaria de postar, e encontro logo na primeira página do google 6 entre 10 resultados, exatamente o mesmo conteúdo.

Se não bastasse essa evidente duplicação, o conteúdo nem possui qualidade, com isso, blogs sérios com algo realmente importante a dizer, parecem não encontrar a sua relevância.

Legal, o método .live() do jQuery, veio apartir das versões 1.4, existe um plugin chamado livequery [que eu pessoalmente, nunca usei], o .live() nativo desde então, nos ajuda a atrelar eventos aos elementos dinamicamente, mesmo que estes não estejam presentes no DOM, no instante do document.ready

Na prática, o método .live(), atrela as funções aos elementos dinâmicamente, no momento em que você tenta chamar.

O motivo desse método existir, é que se eu criar algum elemento com javascript, ou trazer com ajax, esse elemento que não existia no momento do document.ready, e portanto, não teve o evento atrelado, pode ganhar vida.

Exemplo do ‘problema:’



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
	var i = $('.box').size();
	$("input[name='add']").click(function(){
		i++;
		$('#campos').append('<div class="box">'+i+'</div>');
	});

	$('.box').click(function(){
		oi( $( this ).html() );
	});
});
function oi( nome ){
	alert( 'Oi, eu sou o .box: '+nome );
}
</script>
<style>
#campos {
	width: 400px;
}
.box {
	background: #f0f;
	height: 70px;
	width: 70px;
	float: left;
	margin: 0 10px 10px 0;
	text-align: center;
	line-height: 70px;
}

</style>
</head>
<body>


	<input type="button" name="add" value="add" />
	<div id="campos">
		<div class="box">1</div>
		<div class="box">2</div>
	</div><!-- /campos -->


</body>
</html>

Clique primeiro na caixinha 1 ou na 2, vc verá que é exibido um alert, com o texto que está dentro da div.

Depois vá clicando em [add], serão criados mais elementos, com a autonumeração.

apesar desses novos elementos, serem idênticos aos outros 2 que já existiam, estes novos, não disparam o alert() se clicados.

veja:

	$('.box').click(function(){
		oi( $( this ).html() );
	});

É neste trecho que atrelo uma rotina ao evento onclick de todos os elementos que possuirem a class .box

Porém, convém lembrar que os novos elementos, adicionados qndo cliquei no [add], não existiam no instante do document.ready, e portanto, ainda não tiveram o evento atrelado.

Quando vc faz uma requisição ajax, e joga os elementos no documento, com javascript, ocorre o mesmo desse meu exemplo: “Os elementos não existiam, e por isso, ainda não tem o evento atrelado a eles.”

Note que se eu tivesse feito:

$('#campos').append( '<div class="box" onclick="oi( this.innerHTML );">'+i+'</div>' );

este problema não aconteceria. Pois a rotina está explicitamente atrelada ao evento ali.

Porém, como isso é uma má prática de programação javascript [misturar camadas, javascript inline..], vamos ao método jQuery de resolver.

Basta trocar:

	$('.box').click(function(){

por:

	$('.box').live('click', function(){

Somente isso. =)
Qualquer coisa comentem!

33 Comments

  1. Não vi nenhuma diferença deste post c/ os outros.

    • hum.. porque ? me linka alguns ‘outros’
      De diferente, eu expliquei a situação com um exemplo real, dei 2 possíveis soluções, e criei meu próprio script.

      Eu explico a mágica e o motivo, coisa que os outros posts que vi não souberam explicar.

  2. Bem explicado e ainda com exemplos válidos de possiveis erros de usuários 😉

    Isso ae rapá continue com a boa vontade… gente assim vai longe 🙂

  3. Evandro Oliveira

    junho 8, 2011 at 16:40

    Alguém esqueceu um itálico aberto.
    Will, .delegate() também funciona para elementos futuramente criados??? Ela é mais rápida que .live().

    http://jsperf.com/jquery-live-vs-jquery-delegate/16
    http://jquerybyexample.blogspot.com/2010/08/bind-vs-live-vs-delegate-function.html

    • Funciona, porém não da mesma forma.. tem um detalhe do .delegate() que não te permite trocar o .live() sempre por ele..
      meio complicado de explicar, depois eu faço um post disso.

      (não achei o italico aberto)

      • Evandro Oliveira

        junho 9, 2011 at 15:31

        “[…] o .live() nativo desde então, nos ajuda a (i)atrelar eventos […]”

  4. 😛 😛 😛 Gostaria de parabenizá-lo pelo artigo. Bem simples, porém intuitivo. Forte abraço nota 10.

  5. william, poderia dar uma ajuda aqui???

    é o seguinte, to chamando uma pagina q contem um form simples, atravez do ajax do fancybox. blz.
    mas não consigo atralar um evento de validação ao form que vem pelo fancybox.

    pra chamar

    $("#link_add_obs").fancybox({});

    o que atrela a validação…

    $("#form_add_obs").live("submit", function() { ...

    porem nada acontece nem na valiação nem no retante do script…

    o que pode ser???

    obrigado

  6. Olá sabe me dizer como eu passo esses parametros para um menu em flash?

    tentei desta e de outras formas envolvendo a div(ajax-links) do link e ñ tive sucesso.

    on (release) {
        getUrl("#contato");
    }

    uso o jquery.history com conteudo carregado por ajax

    vlw.

    • Oi Rafael,

      Cara, eu não trabalho com flash. Dá uma perguntanda em algum fórum do assunto. Esse meu post, não tem muito a ver com a tua dúvida.

      []s! boa sorte.

  7. Vlw!!!

    Ajudou mto!

    Abraço

  8. Poxa, ajudou muito William, eu estava gerando elementos dinamicamente e os eventos não eram atrelados corretamente. Deu certinho! valeu

  9. Diana Cordeiro

    setembro 5, 2012 at 13:18

    Boa Tarde!!!

    Me ajudou muitooooo!! Obrigadaaaa!! Salvou meu dia!!!

  10. wbruno, seu blog é bacana! mas o metodo live() faz outras coisas interessantes como vincular eventos de mouse, coisa que o click não pode fazer. Por exemplo:

    $('.box').live({
        click: function(){},
        mouseover: function(){},
        mouseout: function(){},
        focus: function(){}
    });

    e etc.. 😀
    Somente isso =)

  11. Olá,
    o método .live() foi descontinuado tem algum outro método que execute a mesma função pois tentei com o .on() e não deu certo

  12. Olá, estou precisando utilizar algo semelhante a este comando live do jquery, porém eu preciso interagir entre o Banco de Dados e a página, ou seja, quando o usuário estiver na página e eu realizar alguma alteração, a mesma seja exibida diretamente lá no site, sem que o internalta atualize a página ou passe o mouse ou qualquer coisa.. como faço?

    fico no aguardo.

    abs

  13. Desenvolvedor 1

    outubro 9, 2013 at 15:11

    Seu artigo tem a primeira boa característica que um artigo pode ter: Objetividade!

    Parabéns!
    Agora não vou precisar fazer várias funções pra resolver este problema, como eu imaginei que teria que fazer.

    Valeu!

  14. caraca meu , otima explicacao. parabens!

  15. Boa Tarde Man

    Muito Obg pelo artigo me quebrou um galhão!

    Eu não entendi uma coisa! Disseram que o live() foi descontinuado e que passaram a utilizar o on()

    Porem comigo o live() funcionou e o on() não

    Abrs

    • o .on(), precisa ser usado igual o .delegate() [q tb foi descontinuado], não adianta só trocar.
      Tem q fazer algo como:

      $('body').on('click', '#elemento', function(){
  16. Parabéns pelo post amigo. Ajudou muito

  17. Willian Bruno,

    Finalmente encontrei um blog que realmente fala diretamente sem enrolações, parabéns pela comunição objetiva e clara, em desenvolvimento é o que realmente acho que pecamos. Parabéns pelo lado técnico e pela comunicação, já está nos favoritos!

    Abraços

  18. Caro amigo ótimo post me ajudou muito.
    más a função .live foi descontinuado na versão 1.9 do jquery 🙁
    Agora este método só é viável da seguinte maneira.

    $('body').on('click','#elemento',callback);
  19. Funcionou lindamente, mas por algum motivo no meu aqui ele abria a pagina e depois voltava para o loading. Tive que comentar a linha de loading. Mas ta de parabéns abraço

  20. Excelente, me ajudou pois ou formas não estavam funcionando.

  21. Eu tenho uma situçao complicada tenho um IP xxx.xxx.xxx.xxx servidor eu abro a pagina e essa mesma tem que me indicar se esse servidor esta online o problema e que nao posso ficar atualizando toda hora tem que ficar aberta e quando cair fica de online para offline. Pode me ajuda? usei o setintervall e consegui fazer a funçao para o php dar esse resultado. Mas ficar verificando aberto sem recarregar ta complicado de conseguir. Pois nao mostra o resultado PHP no javascript 🙁

  22. estou com uma duvida …

    eu criei um id randomico via ajax numa pagina ja carregada … esse id randomico vai ser o ID de um novo span que vai aparecer na tela atraves de um segundo ajax …

    ex.

    o id nao existia antes do ajax ser executado …. mas agora que ele foi gerado eu atualizo um outro SPAN que ja existia inicialmente na pagina com o retorno deste codigo :

    function atualizar()
    {
      document.getElementById('id_randomico').value = novovalor ;
    }
    

    mas parece que quando eu chamo essa fu ncao … nao acontece nada no span do id randomico ….

    a minha duvida eh,
    esse codigo javascript que adicionei via ajax nao vai funcionar quando eu chamar essa funcao ?

    desde ja obrigado …
    abraços
    oliver

Deixe uma resposta

Your email address will not be published.

*