1

リスト「li」のリンクをjsonデータから出力し、jqueryモバイル要素に渡そうとしています。しかし、「li」のリンクは、jqueryを追加した後、通常のリンク（適切なリストビューjqueryモバイルではなく青色のリンク）のように出力され、jqueryモバイルの属性cssを表示しませんでした。

私が正しく説明しているかどうかわかりませんが、ここで何が間違っていますか??

<?php include "_header.php" ?>
<div data-role="header" data-theme="c">
    <div align="center">
                //some code
    </div>
</div><!-- /header -->
<div data-role="content">   
    <div align="center"><img src="imgs/charmchasers-m.png" alt="Charmchasers logo" width="250px" ></div>    

    <div class="content-primary">
        <ul data-role="listview" data-inset="true" data-theme="e">
            <li>
                <h3>North America</h3>
                <p>H-D Dealer Charms - USA &amp; Canada.</p>
                <ul data-role="listview" data-filter="true" data-theme="c" data-inset="true" id="state-list">
                </ul>
            </li>
            <li>
                <a href="display.php?state=international" data-transition="slide">
                    <h3>International</h3>
                    <p>H-D Dealer Charms - Asia &amp; Europe.</p>
                </a>
            </li>
            <li>
                //some code
            </li>
            <li>
                //some code
            </li>
        </ul>
    </div>
</div><!-- /content -->
<div data-role="navbar" data-iconpos="bottom">
    <ul>
        <li><a href="display.php?state=new" data-role="button" data-icon="star" data-theme="a" data-transition="slide">New Charms</a></li>
        <li>//some code</li>
    </ul>
</div><!-- /navbar -->
<script>
(function() {
    var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>');
        });
    });
}) ();
</script>

何か案が？？

4

2 に答える 2

1

新しいコンテンツが追加されるたびjQuery Mobileに、強制的にページ マークアップを強化する必要があります。それはさまざまな方法で行うことができます。詳細を知りたい場合は、この記事をご覧ください。より透明性を高めるために、私の個人的なブログをご覧ください。またはこちらをご覧ください。

この関数を使用する必要があります:

$('#state-list').listview('refresh');

コードは次のように変更する必要があります。

(function() {
    var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>');
        });
       $('#state-list').listview('refresh'); 
    });
}) ();

覚えておくべきもう 1 つのことは、この行は内部で使用する必要があります$.getJSONが、$.eachループがコンテンツの追加で終了した後に使用する必要があることです。最後に覚えておくべき最後の 1 つのことは、可能な場合は従来の準備が整った関数を で使用しないでください。代わりに使用する必要があります。詳細については、こちらを参照してください。jQuery DOMjQuery Mobilepage events

于 2013-02-01T16:15:07.210 に答える
0

「クライアント側で新しいマークアップを生成するか、Ajax を介してコンテンツを読み込んでページに挿入すると、create イベントをトリガーして、新しいマークアップに含まれるすべてのプラグインの自動初期化を処理できます。」- http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

したがって、新しいリスト項目を追加した後、create イベントをトリガーしてリストビューを作成する必要があります。試す：

$('ul').listview('refresh');

また

$('ul').trigger('create');

編集：

$.each() ループ内でこれを試してください:

$('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>').listview('refresh');

.listview('refresh'); を追加しました。各追加の終わりに。リスト ビューが既に初期化されている場合は、機能するはずです。

于 2013-02-01T16:07:52.907 に答える