4

jQuery Mobile を使用してサイトを作成しています。インデックス ページに検索用のフォームを配置しました。ajax投稿の送信イベントをフックしました。ajax が成功する<ul>...</ul>と、ターゲット コンテナーに配置されたリソース (html、) を取得し、ビューを拡張するための create イベントをトリガーします。これは初めてうまくいきます。インデックス ページに戻って再度検索すると、強化されていない未加工のリストビューが表示されました。その理由を教えてください。ps: 私は多くの方法を試しましたが、ますます多くの問題があり、公式ドキュメントは非常に貧弱でした.

$(document).bind('pageinit',function(){
        $("#search").submit(function(){
            var searchdata = $("#search").serialize();

            $.ajax({
                'type':"POST",
                'url':"/server/jnulib.php?action=search",
                'data':searchdata,
                'success':function(data){
                    $("#searchresultfield > ul").remove();
                    $("#searchresultfield").html(data).find('ul').trigger('create');

                    try{
                        $("#searchresultfield > ul").listview('refresh');
                    }catch(e){

                    }

                    $.mobile.changePage("#searchresult");
                       //$("div[data-role='header'] > a").
                }
            });

            return false;
        });
    });

編集: テスト URL: http://ijnu.sinaapp.com 別の問題: 2 番目の ajax 要求が失敗し、ブラウザーが ajax ターゲットにまっすぐ移動します。

4

5 に答える 5

1

私にとっては .trigger('create');、要素に適用すると常に機能しますdata-role="page"

例えば

HTML コード

<div data-role="page" id="somePage">
...
</div>

Javascript コード

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

それが役に立てば幸い

于 2012-12-15T01:21:04.823 に答える
1

変更してみることができます：

$("#searchresultfield").html(data).find('ul').trigger('create');

に：

$("#searchresultfield").html(data).find('ul').listview().listview('refresh');

要素を追加または削除するたびに更新する必要があり、リスト全体を削除する場合は、再初期化する必要があります。

また、表示されていない場合、listview('refresh') が正しくレンダリングされないという問題がありました。

$(document).on('pageshow','div',function(event, ui){
 if($("#searchresultfield > ul").is(":visible")) $("#searchresultfield > ul").listview('refresh');
});
于 2012-05-07T19:00:59.990 に答える
0

試す：

$("#searchresultfield > ul").empty();

それ以外の

$("#searchresultfield > ul").remove();
于 2012-05-08T03:17:37.463 に答える
0

問題は、すべてが異なるファイルから1つの大きなページにあるにもかかわらず、jqueryモバイルがすべてのページをロードし、ナビゲーションがこのページのさまざまなポイントに移動することに基づいているため、最初にアクセスしたときにアクセスしたページが考慮されることです。ただし、[戻る] ボタンをクリックしてそのページから移動すると、そのページはまだ作成されていると見なされるため、イベントが再度発生することはありません。

私が使用したのは：

$('#oppList').live('pageshow',function(event){
    getList();

});

#opplist は、ロードしたばかりのページの data-role="page" の ID です。ページが表示されるたびにイベントが発生するため、ページが最初にロードされたときかその後に発生するかは問題ではありません。

jqueryモバイルイベントについてはこちらをご覧ください

jqueryモバイルナビゲーションについてはこちらもご覧ください

お役に立てれば ！

于 2012-05-10T08:45:45.100 に答える
0

送信イベントが処理されたら、フックを外してみてください。以前のページに戻ったら、もう一度開始します。イベントハンドラを複数回追加すると、多くの問題が発生する可能性があります。

于 2012-05-10T13:01:19.023 に答える