Fazer o “click” funcionar após uma atualização via ajax

Boa noite!

Uma dica rápida sobre um problema que muitos já passaram, inclusive eu 🙂

Você fez uma página com um botão, por exemplo:

E adicionou uma funcionalidade à ele:

Tudo funcionando perfeitamente, mas você cria uma nova página cujo conteúdo é carregado via ajax e o mesmo código acima não funciona mais.


O problema é que a função click apenas funciona nos elementos já presentes na página no momento em que é carregada, e o novo conteúdo aparece depois.

Poderíamos usar o “live”. Basta trocar o código javascript acima por:

Com o “live”, o evento vai ser acionado para todos os elementos, presentes e futuros.

O problema é que o “live”, assim como outras funções de eventos como o bind e o delegate, se tornaram “deprecated” na versão 1.7 e totalmente removidas a partir da 1.9. (Obrigado Emerson pelo comentário)

Solução: Usar o “on”. A estrutura é muito parecida com o “live” e com o mesmo efeito:

Referências:
http://api.jquery.com/click/
http://api.jquery.com/on/
http://api.jquery.com/live/

Até a próxima!
Leandro Silva

PHP developer since 1997, loves movies, music and dogs.

9 Comentários para: “Fazer o “click” funcionar após uma atualização via ajax

  1. Se eu não me engano, nas versões mais novas do jQuery você pode/deve usar o “on”.

    $(‘.btn’).on(‘click’,function(){
    alert(‘Salvando’);
    });

    Espero ter ajudado.
    Valeu.

    • Verdade, usando o “on” é outra maneira e é a recomendada, já que o live e outras funções de eventos foram removidas a partir da versão 1.9.
      Referência:
      http://api.jquery.com/on/

      Obrigado Emerson! Vou atualizar o post.

      • Boa noite!

        Eu tenho uma grade de itens que são carregados via AJAX a cada 3 segundos na minha página. O problema é que a função on() não funciona da maneira que espero…

        Aqui está o código de onde utilizo…

        this.gridItems.forEach( function( item, idx ) {
        $(item).on(‘click’, function() {
        self._openSlideshow(idx);
        });
        } );

        Como mais posso contornar esse problema?

        Aquele abraço!
        Ricardo

  2. Eu acrescento alguns checkbox com uma requisão ajax. No entanto o evento click que checa quais checkbox estão com a propriedade selected true não consegue detectar os checkbox que uma função ajax acrescenta na página.
    Já usei o ON da mesma forma que api do JQuery recomenda, no entando nenhum resultado. Tem alguma ideia de como eu posso fazer isso?

  3. Olá Adao!

    Cole aqui as linhas do código onde você cria os checkboxes e as que você checa quais estão marcados para poder te ajudar melhor.

    Obrigado!
    Leandro Silva

  4. Estou enfrentando o mesmo problema, utilizo o .on(‘click’), mas ele age como o .click() apenas para elementos originais da página, os elementos que são adicionados depois não são reconhecidos pela função.

    • tente assim:

      .on(“click”, “#nomedoElemento”, function(){…

      Eu consegui assim, se eu nao colocasse o nome do elemento que ia ser clicado como segundo parametro ele agia normal como um .click()!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*