0

Como faço essa funcao funcionar com elementos gerados dinamicamente? Ela so funciona quando e elemento é carregado junto com a pagina, mas quando gero a div com ajax a funcao nao funciona!

$('.rating1').likeDislike({
        reverseMode: true,
        disabledClass: 'disable',
        click: function (value, l, d, event) {          
            var likes = $(this.element).find('.likes');
            var dislikes =  $(this.element).find('.dislikes');

            likes.text(parseInt(likes.text()) + l);
            dislikes.text(parseInt(dislikes.text()) + d);
        }     
    });

O codigo ajax:

$.ajax({
    url : link,
    type: 'GET',
    dataType: "html",
    preocessData: false,       
  })
  .done(function(msg2){  

     // Adiciono esse elemento dinamicamente
      <div class="rating rating1">
            <button class="btn btn-default like">Like</button>
            <span class="likes">0</span>
            <button class="btn btn-default dislike">Dislike</button>
            <span class="dislikes">0</span>
        </div>    
}

})
6
  • 1
    Qual o código do seu AJAX? Edite a sua mensagem acima e o inclua, por favor. Commented 7/03/2018 às 16:07
  • Editei a pergunta!
    – Thiago
    Commented 7/03/2018 às 16:15
  • <div class="rating1" id="rating"> Class trocada com ID Commented 7/03/2018 às 16:16
  • Desculpe, editado!
    – Thiago
    Commented 7/03/2018 às 16:20
  • Depois de adicionar a nova div no document, você executou novamente o código $('.rating1').likeDislike(....? Commented 7/03/2018 às 16:28

1 Resposta 1

1

Quando você faz o bind de $('.rating1').likeDislike(.... ele é aplicado somente aos elementos que já existem no DOM, você precisa realizar a mesma operação para os que forem criados dinamicamente após isso. E recomendo que você crie eles com uma classe difernte, novo, aplique e depois remova, assim você evita de manipular novamente aqueles que já tiveram a funcionalidade associada.

Existem maneiras mais robustas de resolver esse problema, mas segue um exemplo:

$.ajax({
    url : link,
    type: 'GET',
    dataType: "html",
    preocessData: false,       
  })
  .done(function(msg2){  

     // Adiciono esse elemento dinamicamente
      <div class="rating rating1 novoRating">
            <button class="btn btn-default like">Like</button>
            <span class="likes">0</span>
            <button class="btn btn-default dislike">Dislike</button>
            <span class="dislikes">0</span>
        </div>  

    //aplica aos novos elementos
    $('.novoRating').likeDislike({
        reverseMode: true,
        disabledClass: 'disable',
        click: function (value, l, d, event) {          
            var likes = $(this.element).find('.likes');
            var dislikes =  $(this.element).find('.dislikes');

            likes.text(parseInt(likes.text()) + l);
            dislikes.text(parseInt(dislikes.text()) + d);       

        }     
    });

    //remove a classe 
    $('.novoRating').removeClass('novoRating');
}

});
1
  • Funcionou, mas nao precisei colocar a classe .novo por que so vai aparecer um botao por vez na pagina. Mas gerar o script no retorno do ajax funcionou!
    – Thiago
    Commented 8/03/2018 às 11:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .