1

動的な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">

これは、ul要素のみを含む私のHTMLページであり、リストビューは動的に追加されます

<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

星評価を実装するために、コードを変更しました。現在、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 に答える