Jquery Mobile 导航页面刷新 css 移除答案

【问题标题】：Jquery Mobile navigation page refresh css removedJquery Mobile 导航页面刷新 css 移除
【发布时间】：2013-03-11 08:26:45
【问题描述】：

我计划使用 JQM 移动框架从两个页面导航，我计划创建多个页面，为了使我的代码整洁，我决定将多个页面放在不同的 html 文件中。在导航到下一个屏幕页面刷新页面 CSS 未加载。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 1</title>
<link rel="stylesheet"
    href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script
    src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$(document).swipeleft(function() {
    $.mobile.changePage("page2.html");
});

</script>
</head>
<body>
    <div data-role="page" id="page1" data-dom-cache="true">
    <div data-role="header"></div>
        <div data-role="content">
            <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
                <div data-role="collapsible">
                    <h3>Section 1</h3>
                    <p><a href="page2.html" data-transition="slide" >I'm the collapsible content for section 1</a></p>
                </div>
                <div data-role="collapsible">
                    <h3>Section 2</h3>
                    <p>I'm the collapsible content for section 2</p>
                </div>
                <div data-role="collapsible">
                    <h3>Section 3</h3>
                    <p>I'm the collapsible content for section 3</p>
                </div>
            </div>
        </div>  
        <div data-role="footer"></div> 
    </div>

</body>
</html>

第 2 页：我有以下代码

<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header"></div>
    <div data-role="content">
        <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
            <div data-role="collapsible">
                <h3>Page 2</h3>
                <p>
                    <a href="page3.html" data-transition="slide">I'm the
                        collapsible content for section 1</a>
                </p>
            </div>
            <div data-role="collapsible">
                <h3>Section 2</h3>
                <p>I'm the collapsible content for section 2</p>
            </div>
            <div data-role="collapsible">
                <h3>Section 3</h3>
                <p>I'm the collapsible content for section 3</p>
            </div>
        </div>
    </div>
    <div data-role="footer"></div>
</div>

导航发生，但是当我刷新页面时，css 被删除。如何拥有多个页面并在屏幕之间导航。

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

将您的 page1.html 更改为以下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1" data-dom-cache="true">
    <div data-role="header"></div>
        <div data-role="content">
            <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
                <div data-role="collapsible">
                    <h3>Section 1</h3>
                    <p><a href="page2.html" data-transition="slide" >I'm the collapsible content for section 1</a></p>
                </div>
                <div data-role="collapsible">
                    <h3>Section 2</h3>
                    <p>I'm the collapsible content for section 2</p>
                </div>
                <div data-role="collapsible">
                    <h3>Section 3</h3>
                    <p>I'm the collapsible content for section 3</p>
                </div>
            </div>
        </div>  
        <div data-role="footer"></div> 
    </div>
<script type="text/javascript">
$('#page1').on('pageshow',function(event){
    $("#page1").swiperight(function () {
        $.mobile.changePage("page2.html");
    });

});
</script>
</body>
</html>

并更改您的 page2.html 如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
    <div data-role="page" id="page2" data-dom-cache="true">
        <div data-role="header"></div>
            <div data-role="content">
                <div data-role="collapsible-set" data-theme="c" data-content-theme="d">
                    <div data-role="collapsible">
                        <h3>Page 2</h3>
                        <p>
                            <a href="page3.html" data-transition="slide">I'm the
                                collapsible content for section 1</a>
                        </p>
                    </div>
                    <div data-role="collapsible">
                        <h3>Section 2</h3>
                        <p>I'm the collapsible content for section 2</p>
                    </div>
                    <div data-role="collapsible">
                        <h3>Section 3</h3>
                        <p>I'm the collapsible content for section 3</p>
                    </div>
                </div>
            </div>
            <div data-role="footer"></div>
        </div>
<script type="text/javascript">
$('#page2').on('pageshow',function(event){
    alert('page2 loaded');
});
</script>
</body>
</html>

它现在应该可以工作了。请告诉我会发生什么。我将脚本包裹在$('#page2').on('pageshow',function(event){}); 中。这是我所做的唯一改变。

【讨论】：

请向 OP 解释您提供此更改的原因。
它立即导航到下一页 page2。它不能解决我的问题
检查更新的代码。我已将滑动事件分配给页面的 ID。
m.stanford.edu/#events/today 检查这个 jqm 页面，他们只有标准的 JQM 格式页面，但它工作正常。即使在刷新
Mayu 感谢您终于发现该网站使用的是旧版本的 JQM 感谢您的宝贵时间。

【解决方案2】：

我指的是http://m.stanford.edu/#events，它使用的是旧版本的JQM

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1 jquery.mobile1.0a4.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

在最新版本中，即

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

以上问题由最新版本完成

$(document).on("mobileinit", function () {
    $.mobile.pushStateEnabled = false; 
});

【讨论】：