1

我正在尝试创建一个动态列表并为列表视图中的每个项目添加星级。如果我创建一个静态列表，一切都会正确显示，但如果我动态创建它，它不会显示星级，而是显示单选按钮。以下是我的代码中包含的脚本和 css。

<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.rating.js" type="text/javascript"></script>
<link href="jquery-mobile/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.rating.css" rel="stylesheet" type="text/css">

这是我的 HTML 页面，其中仅包含 ul 元素，并且列表视图是动态添加的

<div data-role="page" id="mypage">
    <div data-role="header" data-position="fixed">
        <a id="btnLink" href="#"  rel="external" data-direction="reverse" data-rel="back" data-icon="back">Back</a>
        <h1 id="venHeader"></h1>
        <a id="btnHome" href="index.html" rel="external" data-icon="home">Home</a> 
    </div>

    <div data-role="content">
        <ul id="vendorlist" data-role="listview" data-list-icon="gear" data-filter="true">
        </ul>

    </div>

    <div data-role="footer">
        <h4>Footer</h4>
    </div>
</div>

下面是我的脚本

<script>
$("#mypage").live('pagebeforeshow',function(){
    $.post("jquery-mobile/getvalue.jsp",
    {
        struser:"username",
        password:"password"
    },
    function(data,status){
        if(status="success"){
            var rowdata = data.split("|"); // | is the row delimiter
            var vendorlist="";
            $.each(rowdata,function(i, rowelement){
                var columndata = rowelement.split("::"); // :: is the column delimiter
                if(i>0){
                    var list = '<li>' +              
                        '<div class="checkBoxLeft">' +
                            '<input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>' +
                        '</div>' +
                        '<a href="#" class="detailListText">' +
                            '<h3>'+columndata[2]+'</h3>' +
                            '<span class="ui-li-aside" style="padding:0px 0px 0px 0px;">' +
                                '<input data-role="none" name="star1" type="radio" class="star" title=""/>' +
                                '<input data-role="none" name="star1" type="radio" class="star" title=""/>' +
                                '<input data-role="none" name="star1" type="radio" class="star" title=""/>' +
                                '<input data-role="none" name="star1" type="radio" class="star" title=""/>' +
                                '<input data-role="none" name="star1" type="radio" class="star" title=""/>' +
                            '</span>' +
                            '<p>'+columndata[3]+'</p>' +
                        '</a>' +
                        '</a><a href="#" data-icon="home"></a>' +
                    '</li>';
                    vendorlist = vendorlist+list;
                };
            });
            $("#vendorlist").append(vendorlist);
            $("#vendorlist").listview("refresh");
        }
    });
});
</script>

你能帮我解决这个问题吗？

4

2 回答 2

5

为了实现 Star Rating，我更改了我的代码。现在我正在使用 Rateit 插件http://rateit.codeplex.com/。下面是解决我的问题的脚本。

<script>
$("#mypage").live('pagebeforeshow',function(){
    $.post("jquery-mobile/getvalue.jsp",
    {
        struser:"username",
        password:"password"
    },
    function(data,status){
        if(status="success"){
            var rowdata = data.split("|"); // | is the row delimiter
            var vendorlist="";
            $.each(rowdata,function(i, rowelement){
                var columndata = rowelement.split("::"); // :: is the column delimiter
                if(i>0){
                    var list = '<li>' +              
                        '<div class="checkBoxLeft">' +
                            '<input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>' +
                        '</div>' +
                        '<a href="#" class="detailListText">' +
                            '<h3>'+columndata[2]+'</h3>' +
                            '<span class="ui-li-aside" style="padding:0px 0px 0px 0px;">' +
                                '<div class="rateit"></div>' +
                            '</span>' +
                            '<p>'+columndata[3]+'</p>' +
                        '</a>' +
                        '</a><a href="#" data-icon="home"></a>' +
                    '</li>';
                    vendorlist = vendorlist+list;
                };
            });
            $("#vendorlist").append(vendorlist);
            $("#vendorlist").listview("refresh");
            $('.rateit').rateit();
        }
    });
});
</script>

为了“激活”在 domready 之后添加到 dom 的项目的 rateit 控件，您只需调用$('.rateit').rateit(); 加载列表视图后。

于 2013-02-05T16:56:07.223 回答
2

问题是在插入新的 HTML 之后，您需要再次调用该插件。

在这之后...

$("#vendorlist").append(vendorlist);
$("#vendorlist").listview("refresh");

你需要这样做......

    $('.star').rating();

这就是你对新插件所做的。任何一个插件都可以工作。

于 2013-02-24T13:08:30.533 回答