Function javascript work with dynamically generated elements

Question

How do I make this function work with dynamically generated elements? It only works when and element is loaded along with page, but when Gero a div with ajax the function does not work!

$('.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);
        }     
    });

The ajax code:

$.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>    
}

})

Answer 1

When you bind to $('.rating1').likeDislike(.... it is applied only to elements that already exist in the DOM, you need to perform the same operation for those that are created dynamically after that. And I recommend that you raise them with a different class, novo, apply and then remove, so you avoid manipulating again those who have already had the associated functionality.

There are more robust ways to solve this problem, but follow an example:

$.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');
}

});