Stars corresponding to the dropdown in Star Rating jQuery Plugin don't show up in case of dynamically generated data

I'm using Chris Richards' Star Rating jQuery Plugin from Github alongwith the jQuery Template plugin. When the data is inline, the rating control works fine. See sample & source.

However, when the rating control is used with dynamically generated data, the star image doesn't get applied through the CSS to the dropdown control that internally handles the rating. See sample (click on buttons there) & source.

The alert that I have set to the rat开发者_如何学Going control works though. What can be done to make the stars show up instead of the dropdown?

---

You will need to call $(".rating").rating(); after the dynamic content load is complete.

Modify your getJSON code:

$("#flickr").live("click", function() {
  var url = "http://api.flickr.com/services/feeds/groups_pool.gne?id=44124373027@N01&lang=en-us&format=json&jsoncallback=?";
  // Grab some flickr images of cats
  $.getJSON(url, function (data) {
    // Format the data using the catTemplate
    $("#result").empty().append("");
    $("#catTemplate").tmpl(data.items).appendTo("#result");
    // set up rating plugin
    $(".rating").rating();
  });
});