jQuery Mobile - 特定於頁面的JS只在頁面加載後加載一次，並非每次頁面加載時

Question

我使用jQuery Mobile創建了一個應用程序，其中一個導航位於它所控制的頁面之外（即，導航不是在每個頁面內複製，容器外只有一個實例）。這些頁面通過鏈接到頁面ID的data-role =「button」鏈接在'常規'data-role =「page1」中傳遞。

我對每個頁面都有頁面特定的JS，這些頁面在外部JS文件中設置爲一系列if語句 - 如果目標ID是page1，則運行代碼，如果目標ID是page2，則運行該代碼等等。

如果所有的頁面只加載一次，但是如果我重新加載頁面（通過導航欄點擊返回頁面），代碼不會從開始再次觸發;它仍然處於與JS第一次在該頁面上運行時相同的狀態（JS正在控制每個頁面上的動畫）。

我將整個JS綁定到頁面，但是我需要將每個頁面的JS綁定到它的頁面嗎？我極力想研究這個 - 我只是在JQ起步M.

這裏是我的JS：

$(document).bind('pagecreate', function (e) { 
if (e.target.id == 'one') { 

    $('#div-one').animate({marginLeft:"500px"}); 

} 

if (e.target.id == 'two') { 

    //Perform jQuery .animate function 

} 

if (e.target.id == 'three') { 

//Perform jQuery .animate function 

} 

    //etc 

}); 

任何幫助或建議，將不勝感激！

Answer 1

在你的例子中pagecreate事件將只觸發一次，當第一次創建頁面。

所以將其更改爲pagebeforeshow事件，像這樣：

$(document).bind('pagebeforeshow', function (e) { 

如果你不知道該用什麼頁面事件總是用pagebeforeshow。

要了解更多有關頁面事件以及它們是如何工作來看看這個ARTICLE或發現它HERE。

一件事，這不是一個錯誤，但bind(..是deprectaed，切換到on(...事件綁定：

$(document).on('pagebeforeshow', '[data-role="page"]', function (e) { 

，或者如果你想針對特定頁面：

$(document).on('pagebeforeshow', '#page-id', function (e) {