2012-05-01 105 views
4

我正在使用jQuery Mobile來創建一個網站,在索引頁中我在這裏放置了一個表單進行搜索。我迷上了Ajax post的提交事件。當ajax成功獲取放置在目標容器中的資源 (html,<ul>...</ul>)後,觸發創建事件以增強視圖。這項工作第一次很好。當我點擊回到索引頁並再次搜索時,我得到了一個未加強的原始列表視圖,誰能告訴我爲什麼? ps:我已經嘗試了很多方法,但是問題越來越多,官方文件太差了。jquery移動觸發器'創建'不工作,除了第一次

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

編輯:測試網址: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('刷新')呈現不當。

$(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 Mobile的負載,儘管來自不同的文件全部是到一個大的頁面和導航所有頁面的基礎關閉到這個頁面的不同點,這樣當你第一次訪問頁面時,就會考慮創建頁面,但是當點擊後退按鈕並從t他頁面,頁面仍然被認爲是產生這樣的情況下也不會再次觸發,

我使用的是什麼:

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

}); 

哪裏#opplist是數據角色的頁面的ID =「頁面」我只是加載,不管這是否在第一次加載頁面或之後發生,因爲無論何時顯示頁面,都會觸發事件。

Here foe jquery mobile events

而且在這裏看到jquery mobile navigation

希望這有助於!

0

也許你應該嘗試解除提交事件處理。一旦你回到之前的頁面,再次啓動它。多次添加事件處理程序可能會導致很多問題。

1

對於我來說,.trigger('create');總是工作,如果應用於該元素與data-role="page"

例如

HTML代碼

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

JavaScript代碼

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

希望它可以幫助