ajax插件后的jQuery不起作用

Question

我正在使用插件对值进行评分： http : //www.radioactivethinking.com/rateit/example/example.htm

如果直接将它们放入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>

下面的代码不起作用，它通过html检索默认的<input type="range"> 。

$.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");
});

如何将其变成该插件？ 谢谢！

Answer 1

您的第4/5行上有语法错误。 看一下您的“，您还有多余的东西了。

    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>";

Answer 2

好的，我发现这是某种错误或某种错误。 我已经测试了另一个插件，但也不起作用。 我现在使用的是更好的插件，它更简单。 https://github.com/wbotelhos/raty

html非常简单： <div id="score"></div> ，尽管有必要在jQuery上调用它。

$("#score").raty({
    score: function() {
        return $(this).attr('data-rating');
    }
});

我试图对其进行调整，并使所有ID都唯一：

$.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 id=" + 'score' + item.id + "></div></p></li>";
    });
    $("#listviewA").append(info); 
    $("#listviewA").trigger("change");
    $("#listviewA").listview("refresh");
});

但仍然无法正常工作。 我也徒劳地尝试过：

$.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 id=" + 'score' + item.id + "></div></p></li>";

            $("#score" + item.id).raty({
                score: function() {
                    return $(this).attr('data-rating');
                }
            });
        });
        $("#listviewA").append(info); 
        $("#listviewA").trigger("change");
        $("#listviewA").listview("refresh");
    });

顺便说一句，我正在页面显示之前加载此功能。。我不知道这是否是问题。

$(document).on("pagebeforeshow", "#main", function() {
    $(function(){
        get_info();
    });
})