如何使用Jquery正確設置HTML內容？

Question

我有這個javascript代碼，它可以在jsonp dataType中的每部電影中使用。 對於每部電影，我都必須顯示其縮略圖，標題以及星級。 要在每部電影的下方顯示星星符號，請使用以下代碼：

var include = '<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>';
$(".prediction").html(include); //DISPLAYS THE PREDICTION RATING

它只是將類別prediction的html內容設置為此-> <div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
我試圖直接在我的html代碼上使用它，並且完全可以正常工作，我可以看到星星。 這里是：
但是我在javascript上試過了，它沒有顯示。 我只想對每部電影都進行以下評分。

這是我的JavaScript代碼：

var html = '';
var count = 0;

$.each(data.movies, function(index, movie) {    
    html += '<div  class="item col-xs-6 col-md-3">';
    html += '<div class="thumbnail" style="min-height:320px;max-height:320px;">';
        //add link here 
    html += '<a href="viewMovieDetails.php?id=' + movie.id + '">'
    html += '<img src="' + movie.posters.detailed + '" style="width:175px; height: 230px;" class="img-responsive" alt="" ></a>';
    html += '<div class="caption">';
    html += '<h5>' + movie.title + '</h5>';

    html += '<div class="prediction"></div>';
    html += '</div></div></div>';


    //set a delay (1second) for a call on rotten tomatoes api and
    //store data on db
    if(count > 5){
        setTimeout(function() { storeDataOnDB(movie.id);; }, 1000);
        count = 0;
    }
    else{
        count++;
    }
});

// Append movies
$('#movie_recommend').html(html);   

var include = '<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>';
$(".prediction").html(include); //DISPLAYS THE PREDICTION RATING

你覺得錯什么？ 我想念什么嗎？ 還是有其他方法可以做到。 謝謝您的幫助。

Answer 1

您應該通知RateIt插件，新數據可用，只需添加以下內容：

$(".rateit").rateit();

在$(".prediction").html(include);