Question

我是一名资深程序员，但我是整个手机应用程序编程的新手，刚刚进入PhoneGap。我有一个非常简单的页面，我使用JQuery Mobile，PhoneGap和Jquery放在一起，但我遇到了麻烦。当我点击href加载“新闻”页面时，似乎没有执行.ajax（）方法。我已经在传统的文档准备包装中得到它并删除它似乎没有像我想的那样帮助这个问题。所以也许我搞砸了，但我无法弄清楚为什么它不会解雇除非你刷新页面，然后它工作正常。可能是一个新手问题，但我觉得我是第一年的程序员。

更新：要清楚我的问题是什么，我正在使用Firefox测试并使用PhoneGap桌面应用程序提供代码。当我单击“新闻”按钮时，页面会加载，但不会显示由Ajax添加的元素。如果我在浏览器上点击刷新，页面将重新加载并显示元素。它们从不出现在手机上，除非我对代码进行了更改，这会强制手机屏幕桌面应用程序导致页面重新加载到手机上。所以它总是重新加载导致它发生。

这是我的代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:"" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
<title>Hello World</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>My App</h1>
    </div>
    <div role="main" class="ui-content">
        <a href="news.html" class="ui-btn ui-corner-all ui-shadow">News</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow">Gigs</a>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>


</body>

</html>

这是news.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *; img-src * data:" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

        var output = $('#news');

        $.ajax({
            url: 'http://xxxxxx.com/api/news/getnews',
            dataType: 'jsonp',
            cache : false,
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){
                $.each(data, function(i,item){
                    var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
                    + '<p>'+item.body+'<br><small>'
                    + item.date+'</small></p></div>';

                    output.append(story).enhanceWithin();
                });
            },
            error: function(){
                output.text('There was an error loading the data.');
            }
        });

    });    
</script>
<title>News</title>
</head>

<body>
<div id="home" data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>News</h1>
    </div>
    <div role="main" class="ui-content" id="news">
        <div data-role="collapsible">
            <h1>Hi</h1>
            <p>Am I collapsible?</p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>
</body>

</html>

有人可以告诉我为什么除非我先刷新页面，否则ajax不会执行？提前谢谢。

Answer 1

我终于明白了。 news.html页面不应该有html，head部分或body标签....只是简单的身体内容。摆脱jQuery移动后，将新页面加载到已存在的“模板”中。

我确实继续用以下内容替换jquery的文档onready事件：

document.addEventListener("deviceready", function(){

所以现在我的新news.html页面如下所示：

<div id="home" data-role="page">
    <script type="text/javascript">
        document.addEventListener("deviceready", function(){

            var output = $('#news');

            $.ajax({
                url: 'http://xxxxxx.com/api/news/getnews',
                dataType: 'jsonp',
                cache : false,
                jsonp: 'jsoncallback',
                timeout: 5000,
                success: function(data, status){
                    $.each(data, function(i,item){
                        var story = '<div data-role="collapsible"><h1>'+item.title+'</h1>'
                        + '<p>'+item.body+'<br><small>'
                        + item.date+'</small></p></div>';

                        output.append(story).enhanceWithin();
                    });
                },
                error: function(){
                    output.text('There was an error loading the data.');
                }
            });

        });    
    </script>
    <div data-role="header" data-position="fixed">
        <h1>News</h1>
    </div>
    <div role="main" class="ui-content" id="news">
        <div data-role="collapsible">
            <h1>Hi</h1>
            <p>Am I collapsible?</p>
        </div>
    </div>
    <div data-role="footer" data-position="fixed"> 
        <h4>Footer content</h4> 
    </div>
</div>

这是整个页面的内容。我会说，在我修复了这个之后，我开始在内容安全策略中出错，这是另一个问题，但它现在似乎正在工作并加载像它应该的ajax。

为什么我的PhoneGap页面需要重新加载才能激活ajax方法？

1 个答案: