2012-05-01 13 views
4

jQuery Mobileを使用してサイトを作成していますが、インデックスページで検索用のフォームを配置しました。私はajax投稿のイベントを提出しました。 ajaxの成功により、ターゲットコンテナに配置された (html、<ul>...</ul>)のリソースが得られたら、ビューを拡張するためにcreateイベントをトリガーします。これは初めての作業です。私がインデックスページに戻ってクリックして再度検索すると、強調表示されていない生のリストビューが得られます。誰がその理由を教えてくれますか? ps:私は多くの方法を試しましたが、ますます問題があり、公式文書はとても貧弱でした。jquery mobile trigger 'create'が最初以外のときに動作しない

$(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; 
     }); 
    }); 

EDIT:試験URL:http://ijnu.sinaapp.com 別の問題:第二のAJAXリクエストが失敗し、ブラウザが真っ直ぐAjaxのターゲットに移動します。

+0

あなたのサイトは単一のHTMLファイルですか?新しいページが初期化されるたびに、イベントハンドラが実行され、毎回 '$( '#search')。submit(...'イベントハンドラ)が再バインドされます。役に立った – Jasper

答えて

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'); 
}); 
0

試してみてください。

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

代わりの

$("#searchresultfield > ul").remove(); 
0

私はこの問題は、すべて一つの大きなページに異なるファイルからのものとナビゲーションにもかかわらず、すべてのページが基づいてjQueryのモバイル負荷ということだと思いますこのページの別のポイントに移動すると、最初にアクセスしたページが作成されたと見なされますが、戻るボタンをクリックしてtから移動すると彼ページそのページがまだイベントがうまく再起動しませので、作成したとみなされ、私が使用したもの

されました:

#opplistは、ページのデータ-役割=「ページ」のIDです
$('#oppList').live('pageshow',function(event){ 
    getList(); 

}); 

ロードするだけですが、ページが表示されるたびにイベントが発生するため、ページが初めて読み込まれたときに発生するかどうかは関係ありません。

はまた、このことができますjquery mobile navigation

希望はこちらをご覧Here foe jquery mobile events

を参照してください!

0

おそらく、処理された送信イベントをアンフックしようとする必要があります。また、前のページに戻ってからもう一度やり直してください。イベントハンドラを複数回追加すると、多くの問題が発生する可能性があります。私にとって

1

、例えば

HTMLコード

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

Javascriptのコード

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

はそれが

を役に立てば幸い data-role="page"

を持つ要素に適用された場合.trigger('create');は常に動作します

関連する問題