jquery移動pageshow事件發射兩次

我目前有一個移動網站，我正在建設和我在整合自定義JQuery小部件的麻煩。由於某種原因，頁面展示事件會先發生兩次，無論哪一頁首先被加載。jquery移動pageshow事件發射兩次

爲了便於理解，我已經創建了兩個HTML頁面

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>One</title> 

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" /> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
    }); 
    </script> 
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script> 

</head> 
<body id="default"> 
    <div data-role="page" id="content-one"> 
     <div role="main" class="ui-content" id="one-content"> 
      One<br/> 
      <a href="two.html">back to two</a> 
     </div> 
     <script type="text/javascript"> 
     (function($, undefined) { 
      $.widget("test.stuff", { 
       _create : function() { 
        console.log("create"); 
       }, 
       _init : function() { 
        console.log("_init"); 
       }, 
       destroy: function() { 
        this.element.empty(); 
        $.Widget.prototype.destroy.call(this); 
       } 
      }); 
     })(jQuery); 
     </script> 
     <script type="text/javascript"> 
     $(document).on("pageshow", "#content-one", function() { 
      console.log("pageshow1"); 
      $("#content-one").stuff({}); 
     }); 
     $(document).on("pagebeforeshow", "#content-one", function() { 
      console.log("pagebeforeshow1"); 
     }); 
     </script> 
    </div> 
</body> 
</html>

第2頁

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <title>Two</title> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"> </script> 
    <script type="text/javascript"> 
    $(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
    }); 
    </script> 
    <script type="text/javascript" src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script> 

</head> 
<body id="default"> 
    <div data-role="page" id="content-two"> 
     <div role="main" class="ui-content"> 
      Two<br/> 
      <a href="one.html">back to one</a> 
     </div> 
     <script type="text/javascript"> 
     $(document).on("pageshow", "#content-two", function() { 
      console.log("pageshow2"); 
     }); 
     $(document).on("pagebeforeshow", "#content-two", function() { 
      console.log("pagebeforeshow2"); 
     }); 
     </script> 
    </div> 
</body> 
</html>

要重新加載頁面一個第一，轉到頁兩個使用鏈接，然後使用鏈接導航到第一頁。

當頁面1再次被加載時，頁面顯示事件被觸發兩次。我將reloadPage設置爲true，因爲我的頁面具有動態內容，並且無法提供緩存頁面。

我很可能會錯誤地使用這些事件。

來源

2014-01-24 mfleshman

'reloadPage'已被棄用，不再可以被設置爲_option_。而是使用'$ .mobile.pageContainer.pagecontainer（「change」，「page.html」，{reload：true}）;'以加載頁面並以編程方式重新加載。另外，'pageshow'已被棄用，但仍在運行，使用'$（document）.on（「pagecontainershow」，function（）{code}）;'。 – Omar

如果我不應該使用reloadPage我應該使用什麼機制來確保每次加載每個頁面並且不從緩存中取出？我希望這是所有導航的默認功能。 – mfleshman

'reload'而不是'reloadPage'。 – Omar

嘗試用$(document).one("pageshow", ...)代替$(document).on("pageshow",...)，將事件限制爲一次調用http://api.jquery.com/one/。

問題是，在內聯腳本中使用on會在每次加載頁面時創建一個新事件。因此，當您第一次加載頁面時，將執行內聯腳本並觸發頁面顯示事件。第二次再次觸發新事件，但第一次仍在收聽內容 - 一次頁面顯示。事實上，如果你重複這個過程，你會看到三，四，...次的日誌。

另一種選擇是在頭部創建一個腳本，它在$(document).on("pageshow", "#content-one", ...), $(document).on("pageshow", "#content-two", ...)中設置所有必需的觸發器。在這種情況下，腳本只會被初始化一次，所以它會起作用。

來源

2014-03-21 00:10:52 gfg

浪費了大約2個小時試圖做這裏和其他網站的所有修復。我放棄了，他們把一個if語句，以防止再次發射

var hasDownload = false; 
$(document).on("pageinit", "#mypage",function(event){ 
    if (hasDownload === false) { 
     hasDownload = true; 
     // do some work 
    } 
);

來源

2014-08-01 03:06:04 Gplex314159

嘗試在隱藏事件刪除頁面，就像這樣：

$(document).on("mobileinit", function() { 
     $.mobile.changePage.defaults.reloadPage = true; 
     $(docuement).on('pagehide', function (event, ui) { 
      $(event.target).remove(); 
     }); 
    });

Remenber，如果您不要禁用ajax，所有請求將與AJAX

來源

2015-07-25 14:52:07

jquery移動pageshow事件發射兩次

回答

相關問題