Question

基于此question和互联网上的一些资源，如jquery移动文档，我提出了以下代码：

<!DOCTYPE html>
<!---index.html--->
<html>

    <head>
        <title>Simply Running</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </head>


        <body>
        <div data-role="page" id="page">

            <div data-role="header">
                <h1>Header</h1>
            </div><!-- /header -->

            <div role="main" class="ui-content" id="content">
                <p>Loading ...</p>
            </div><!-- /content -->

            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /footer -->
        </div><!-- /page -->
    </body>


</html>

然后我有一些JS：

//index.js
$(document).on('pagecreate', '#page', function(event) {
    loadContent("main.html");
});

function loadContent(location) {
    //Load the html content of the specific side that was requested
    $("#content").load(location);
    //Or to load a specific id from one site:
    //$("#main").load( location + " " + #SPECIFIC);
    return true;
}

function clickedLink() { 
    loadContent($(this).attr('href'));
}

$(document).ready(function() {
    $('#content').on('click', 'a', clickedLink);
});

我有两个页面只存储我想要添加的内容。

<!--main.html--->    
<div role="main" class="ui-content">
        <p>At the main page.</p>
        <p><a href="second.html">Go to second one.</a></p>
</div><!-- /content -->

和

<!-- second.html--->
<div role="main" class="ui-content" id="content">
        <p>At second page.</p>
        <p><a href="main.html">Back to first one.</a></p>
</div><!-- /content -->

第一页显示，但是当我点击链接时，您可能会看到第二页出现的方式，但屏幕突然变白。我是javaScript的新手，学习了一天。我找不到任何解决方案或为什么屏幕变白了。

Answer 1

我提出的解决方案是我使用以下内容：

<a onclick="loadContent('whatever.html')"></a> //Better use ontouchstart, see Edit

这也意味着我只需要使用loadContent函数：

function loadContent(location) {
    //Load the html content of the specific side that was requested
    $("#content").load(location);
}

我不再需要行$('#content').on('click', 'a', clickedLink);了。： - ）

修改

onclick="loadContent('whatever.html')"

对于移动设备来说不是一个好习惯，最好使用

ontouchstart="loadContent('whatever.html')"

在Phonegap中的Jquery Mobile模板/持久页眉/页脚模板

1 个答案: