jQuery Mobile - jQuery.ajax 永远不会被调用答案

【问题标题】：jQuery Mobile - jQuery.ajax never gets calledjQuery Mobile - jQuery.ajax 永远不会被调用
【发布时间】：2012-01-04 11:44:06
【问题描述】：

我已经为此苦苦挣扎了一段时间。下面代码中的 jQuery.ajax 永远不会运行。我知道那是因为我使用了错误的 pageinit/document.ready。

另外一件奇怪的事情是 pageLoadingMsg 并没有变成下面指定的“Laddar...”，而是“正在加载”...

我尝试使用以下命令初始化 ajax 调用：

但是我应该使用什么？我试过了：

$(函数() {

$(document).live('pageinit',function(event){

$(document).live('pagecreate',function(event){

$(document).bind('mobileinit',function(event){

$(document).bind('pageinit',function(event){

我的完整代码：

 $(function() {

     var photos = {};

     $.mobile.showPageLoadingMsg("Laddar...");

     $.ajax({
             type: "get",
             url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
             data: ({tags: 'cat', format: 'json', tagmode: 'any'}),
             cache: false,
             dataType: "json",
             success: onSuccess,
             error: onError
     });
});


//////////////////////////////////////////////////////////////////////////
//
// Handle the returned data
//
//////////////////////////////////////////////////////////////////////////

function onSuccess(data)
{
     photos = data;
     var output = [];

     for (var i = 0, len = data.items.length; i < len; i++) {

         output.push('<li><a data-index="' + i + '" href="details.html?author='+ data.items[i].author +'&image='+ data.items[i].media.m +'"><img src="images/de.png" class="ui-li-icon">' + data.items[i].author + '</a></li>')
     };

     $('#list').append(output.join('')).listview('refresh');
     $.mobile.hidePageLoadingMsg();
}


//////////////////////////////////////////////////////////////////////////
//
// Failure for the ajax call
//
//////////////////////////////////////////////////////////////////////////

function onError(param1, param2, param3)
{
    alert(param1); alert(param2); alert(param3);
}

【问题讨论】：

要设置加载消息设置$.mobile.loadingMessage = "Laddar...";的值然后调用$.mobile.showPageLoadingMsg();

标签： jquery jquery-mobile

【解决方案1】：

这是因为jquery mobile通过ajax请求加载新页面，除了加载的第一个页面外，ajax加载的每个额外页面只拉入第一个“data-role="page"”元素之间存在的内容它发现。

它不会拉入头部或其他任何东西。如果没有找到 'data-role="page"'，它将尝试从 body 标签中加载所有内容。

所以，如果你正在调用一个新页面，并且你想在 dom 上执行一些额外的工作，你需要在第一个 data-role="page" 元素中添加脚本（内部）。如果你要添加到 dom，你应该在

中包含你的 js

$('your-page-id').live('pagebeforecreate', function(){ // code to run here  });

【讨论】：

【解决方案2】：

jQuery mobile 中存在 bug，也许你遇到过。这是解决方案：How to initialize pages in jquery mobile? pageinit not firing

【讨论】：

该线程中提出的解决方案都没有给我答案。我现在已经在这个帖子中发布了解决方案。

【解决方案3】：

按照 Mateusz Wozniak 链接到的线程中的答案的建议，我尝试将我的代码放在

中：

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

<script type="text/javascript">
    $("#news").live('pageinit', function() {


            alert("pageinit runs");
            getData();
     });
</script>

// More html code...

</div>

而getData()是在

部分定义的：

<script type="text/javascript">


    //////////////////////////////////////////////////////////////////////////
    //
    // Get data
    //
    //////////////////////////////////////////////////////////////////////////

    function getData()
    {
         var photos = {};

        alert("getData() runs");

         $.mobile.loadingMessage = "Laddar...";
         $.mobile.showPageLoadingMsg();

         $.ajax({
                 type: "get",
                 url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                 data: ({tags: 'cat', format: 'json', tagmode: 'any'}),
                 cache: false,
                 dataType: "json",
                 success: onSuccess,
                 error: onError
         });    
    }
</script>

第一个警报显示，但不是 getData() 中的那个。我收到错误消息：

getData() 未定义。

但它是，你能看到任何错误吗？

解决方案

这很奇怪。因为在我调用 pageinit 后它找不到我的函数，所以我用谷歌搜索了一下。过了一会儿，我明白你必须把所有的 JS 代码放在标记中。当我把我的 getData() 函数放在那里时，它起作用了！

有人能解释一下原因吗？

【讨论】：