1

さて、私の質問は「単純」です（質問は、解決策はおそらくそうではないかもしれません）。$ .json（）を使用してデータを取得する関数があります。データは<ul>、「pageinit」/「pageshow」から呼び出される関数を使用してにロードする必要があります。何もロードしませんが。しかし！ページを更新すると、pageinitが問題なく完全に読み込まれます。

これは私のjQueryです。

$('#showsPage').bind('pageshow', function(event) {
    getShows();
});

/******* FUNCTIONS *********/
function getShows()
{
    // Loading.
    $.mobile.loading('show');

    // Load the data.
    $.getJSON("some url", function(json) {

        $("#listShows li").remove();

        $.each(json.data, function(index, show) {

            $("#listShows").append("<li><a href='#'>Stuff</a></li>");
            $("#listShows").listview('refresh');

            // Hide the loading.
            $.mobile.loading('hide');

        });
    });
}

私は劇的に間違ったことをしていますか？別のページでpageinitを問題なく実行しています。

4

1 に答える 1

3

pageinitjQuery Mobileのページ遷移のAJAX処理により、またはのようなページイベントにバインドするときにイベントバインドを委任する必要がありますpageshow。

次に例を示します。

$(document).on('pageshow', '#showsPage', getShows);

#showsPageこれにより、要素が実際にDOMに含まれるまでバインディングが発生しないようになります。

引数を渡さない場合は、無名関数が必要ないことに注意してください。引数を渡さない場合は、関数の名前を.on()コールバックとしてメソッドに渡すことができます。

この委任されたイベントハンドラーは、ユーザーがページを更新したり、サイトにディープリンクしたりするたびにバインドする必要があることに注意してください。そのため、外部スクリプトに配置し、そのスクリプトを各ドキュメントのに含めることをお勧めします（終了タグも機能<head>する直前）</body>、data-role="page"要素内ではありません）。これにより、ページを更新してもサイトの機能が損なわれることはありません。もう1つの方法は、特定のページ用のコードをdata-role="page"要素内に配置して、AJAXを介してDOMに取り込まれたときに、コードがjQueryMobileによって解析されるようにすることです。

于 2012-10-05T16:06:12.023 に答える