RateIt works perfectly with direct HTML not after ajax

Dec 17, 2013 at 3:17 PM
The following code works if I put directly into the HTML.
<li>
    <p><strong>Product</strong>
        <br/>
        <input type="range" value="0" step="1" id="rateit" data-role="none">
        <div class="rateit" id="rateitHover" data-rateit-backingfld="#rateit" data-rateit-resetable="false"  data-rateit-ispreset="true"
        data-rateit-min="0" data-rateit-max="5">
        </div>
    </p>
</li>
The code below doesn't work, it retrieves the default <input type="range"> by html.
$.getJSON(url, function(data){
    $.each(data, function(index, item) 
    {
        info += "<li id='" + item.id + "'>" +
        "<p><strong>" + item.product + "</strong><br/>" +
        "<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
        "<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false'  data-rateit-ispreset='true' " +
        "data-rateit-min='0' data-rateit-max='5'></div></p></li>";
    });
    $("#listviewA").append(info); 
    $("#listviewA").trigger("change");
    $("#listviewA").listview("refresh");
});
Coordinator
Dec 18, 2013 at 1:29 PM
Change to :
$.getJSON(url, function(data){
    $.each(data, function(index, item) 
    {
        info += "<li id='" + item.id + "'>" +
        "<p><strong>" + item.product + "</strong><br/>" +
        "<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
        "<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false'  data-rateit-ispreset='true' " +
        "data-rateit-min='0' data-rateit-max='5'></div></p></li>";
    });
    $("#listviewA").append(info); 
    $("#listviewA").trigger("change");
    $("#listviewA").find('.rateit').rateit();
    $("#listviewA").listview("refresh");

});