jquery - 如果我在 JQuery 中创建动态 ListView ，则不会应用星级(插件)样式

Question

我正在尝试创建一个动态列表并为 ListView 中的每个项目添加星级。如果我创建一个静态列表，所有内容都会正确显示，但如果我动态创建它，它不会显示星级，而是显示单选按钮。下面是我的代码中包含的脚本和 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();加载 ListView 后。