0

jquery mobile でリストビューを動的に生成したいと思います。私はこのコードを持っていますが、 .listview('refresh') が機能していません:

<div id="content" data-role="content">       
</div><!-- /content -->

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "my.json",
        dataType: "json",
        success: function(articles) {
            var html = '<ul id="hellolist" data-role="listview"><li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li></ul>';            
            $('#content').append($(html));
            $('#hellolist').listview('refresh');
        }                            
    });
</script>

リスト項目のみを生成するか、ajax を使用しないと、更新によりリストビューが適切にフォーマットされます。

テスト #1: うまく動作します。

<div id="content" data-role="content">
    <ul id="hellolist" data-role="listview"> </ul>
</div><!-- /content -->

<script type="text/javascript">
        var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';            
        $('#hellolist').append($(html));
        $('#hellolist').listview('refresh');
</script>

テスト #2: うまく動作します。

<div id="content" data-role="content">       
</div><!-- /content -->

<script type="text/javascript">
        var html = '<ul id="hellolist" data-role="listview"><li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li></ul>';            
        $('#content').append($(html));
        $('#hellolist').listview('refresh');
</script>

テスト #3: うまく動作します。

<div id="content" data-role="content">
    <ul id="hellolist" data-role="listview"> </ul>       
</div><!-- /content -->

<script type="text/javascript">
    $.ajax({
        type: "GET",
        url: "my.json",
        dataType: "json",
        success: function(articles) {
            var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';            
            $('#hellolist').append($(html));
            $('#hellolist').listview('refresh');
        }                            
    });
</script>

誰でもこの問題を解決するアイデアはありますか?

4

2 に答える 2

1

HTML に空の UL タグが必要ない場合は、.listview("refresh"); の代わりに .trigger('create") メソッドを呼び出してみてください。

それでもうまくいかない場合は、単に .listview(); を呼び出してみてください。「リフレッシュ」パラメータなし。

したがって、基本的に、代わりに

$('#hellolist').listview('refresh');

試す

$('#hellolist').trigger('create');

また

$('#hellolist').listview();

幸運を。

編集: それでも問題が解決しない場合は、代わりに、新しいリストを含むページで create イベントをトリガーしてみてください。

于 2012-11-23T16:44:39.640 に答える
0

ULタグも追加しているため、最初は機能しません。「LI」タグのみを追加してみてください。UL は既に html 構造にあるはずです。

var html = '<li><h3>One</h3></li><li><h3>Two</h3></li><li><h3>Three</h3></li>';

あなたのhtmlで：

   <ul data-role="listview" id="" data-split-icon="gear" data-split-theme="a" ></ul>
于 2012-11-23T16:40:50.477 に答える