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

Question

我正在尝试创建动态listivew并为列表视图中的每个项目添加星级评分.如果我创建一个静态的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').rateit(); 在您加载列表视图后.