簡體   English   中英

當后退按鈕單擊時,停止Jquery Mobile重新初始化頁面?

[英]Stop Jquery Mobile from Reinitialize the Page When Back Button Click?

我在jquery mobile中自己處理后退/前進按鈕。 問題是,當用戶單擊后退按鈕然后jquery發送ajax請求並重新初始化頁面,這會弄亂我的所有工作。 我設置了data-backbtn="false"$.mobile.ajaxEnabled = false; 但這些技巧都不適合我。 任何想法?

我認為你的問題也在$ .mobile.ajaxEnabled = false; 處理。

該代碼示例必須從mobileinti事件觸發,如下所示:

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
});

還有一件事,必須在jQuery Mobile初始化之前觸發mobileinit事件,如下所示:

<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>      
<script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });    
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  

例:

HTML 1:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
        <script>
                $(document).bind("mobileinit", function () {
                    $.mobile.ajaxEnabled = false;
                });    
        </script>         
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="second.html" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html>   

HTML2:

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script> 
        <script>
                $(document).bind("mobileinit", function () {
                    $.mobile.ajaxEnabled = false;
                });    
        </script>         
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>   
</head>
<body>    
    <div data-role="page" id="second">
        <div data-theme="a" data-role="header">
            <h3>
                Second Page
            </h3>
            <a href="index.html" class="ui-btn-left">Back</a>
        </div>

        <div data-role="content">

        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>    
</body>
</html> 

jQuery Mobile在導航離開后從DOM中刪除偽頁面(僅適用於外部頁面)。 您可以通過將data-dom-cache =“true”屬性添加到偽頁面的data-role="page"元素,在單個偽頁面上停止此行為:

<div data-dom-cache="true" data-role="page">
    ...
</div>

還有其他方法可以啟用(很好地禁用我猜)這個功能; 你可以在這里閱讀它們

我最終使用這條適用於我的生產線,

$(window).off('popstate');

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM