How to apply a paid plugin to new generated divs?

Question

I have a page with ratified divs. With the classic code $('.raty').raty({...}); the plugin works fine on these existing divs. But when I load new custom divs thanks to the ajax function, the new divs "don't transform into stars." Could you help me find my mistake?

 $.ajax({ url: '/ws/player/reviews/p/1', context: document.body, contentType: "application/json; charset=utf-8", dataType: "jsonp", jsonp: "callback", jsonpCallback: "jsonpCallbackfunction", success: function(data) { $.each(data.response.reviews, function( key, value ) { html = ''; html += '<div class="raty read" data-rating="5"></div>'; $('#reviews').append(html); }); } data: {player_id: player_id, from: $('#reviews').data('from')} }).done(function() { $(this).find('.raty').raty({ path: '/img/raty/', readOnly: true, score: function() {return $(this).data('rating');} }); }); 

Although, if I try $(this).find('.raty').html('blablabla'); "blablabla" is spelled correctly in all of my ".raty" divs.

Thanks for the help,

Jeremiah

Answer 1

You made a small mistake.

see this code

 $.ajax({ url: '/ws/player/reviews/p/1', context: document.body, contentType: "application/json; charset=utf-8", dataType: "jsonp", jsonp: "callback", jsonpCallback: "jsonpCallbackfunction", success: function(data) { $.each(data.response.reviews, function( key, value ) { html = ''; html += '<div class="raty read" data-rating="5"></div>'; $('#reviews').append(html); }); } data: {player_id: player_id, from: $('#reviews').data('from')}}).done(function() { $(this).find('#reviews .raty').raty({ // Changes path: '/img/raty/', readOnly: true, score: function() {return $(this).data('rating');} });}); 

Hope this code will work