Question

我正在尝试创建动态listivew，并为listview中的每个项目添加星级评分。如果我创建一个静态的listivew一切都正确显示，但如果我动态创建它不显示星级评级，而是显示单选按钮。下面是我的代码中包含的脚本和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元素，listview会动态添加

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

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

Answer 1

要实施星级评分，我已更改了我的代码。现在我正在使用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（）; 在您加载列表视图后。

Answer 2

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

在此之后...

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

你需要这个......

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

你使用新插件做了什么。插件都可以使用。

如果我在JQuery中创建动态列表视图，则不会应用星级（插件）样式

2 个答案: