jRaty jQuery plugin doesn't seem to work with AJAX/JSON

Question

I am using the jRaty plugin to display a 'star' rating - the code to display the star rating is relatively simple (and works when I display the html code in my page) - the problem is I am using an ajax call to re-populate the page using JSON - even though the span is populated in the same manner as the html code below it doesn't display the star rating image using the plugin.

I believe this may have something to do with event delegation (although i'm no jQuery expert) Can anyone explain why my jRaty plugin doesn't work when via the ajax/json method - anyone got any ideas?

 // html code
 <span class="stars" data-score="4"></span>

    /* star rating */
$( ".stars" ).raty( {
    half: true,
    hints: [ "1 Star", "2 Star", "3 Star", "4 Star", "5 Star" ],
    path: "/assets/js/jquery-plugins/jquery-raty/2.5.2/img",
    readOnly: true,
    score: function( ){
        return $(this).attr( "data-score" );
    },
    size: 24,
    starHalf: "star-half-big.png",
starOff: "star-off-big.png",
starOn: "star-on-big.png"
} );

UPDATE..

I have loaded the jRaty in two places on my webpage, one is 'static' and another is dynamic (only shown after the jQuery AJAX call.

The 'static' iteration of the jRaty star rating shows the jQuery/jRaty element on the settings attribute when I inspect the element, whereas the latter 'dynamic' iteration of the jRaty star rating doesn't.

Looks like it isn't just me with this problem.. doh How to apply raty plugin to new generated divs?

score 1 · Accepted Answer · answered Oct 21 '13 at 13:22

Just in case this might help someone else..

I added the following to the AJAX success

success: function(data){            
                $( ".stars" ).raty( {
                    half: true,
                    hints: [ "1 Star", "2 Star", "3 Star", "4 Star", "5 Star" ],
                    path: "/assets/js/jquery-plugins/jquery-raty/2.5.2/img",
                    readOnly: true,
                    score: function( ){
                        return $(this).attr( "data-score" );
                    },
                    size: 24,
                    starHalf: "star-half-big.png",
                starOff: "star-off-big.png",
                starOn: "star-on-big.png"
                } );

            }

jRaty jQuery plugin doesn't seem to work with AJAX/JSON

1 Answers1

Linked