JQuery Mobile 1.3.1“$.Mobile.loading”不工作

Question

我有以下代码：

超文本标记语言：

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

JS公司：

$(document).on({
  ajaxStart: function() { 
    $.mobile.loading('show');
    console.log('getJSON starts...');
  },
  ajaxStop: function() {
    $.mobile.loading('hide');
    console.log('getJSON ends...');
  }    
});

目前，我正在使用Jquery Mobile 1.3.1，并在mozilla firefox和google chrome中测试这段代码。稍后我将在phonegap应用程序中使用它。

我正在加载一个JSON并将其显示在listview的屏幕上。加载时，我希望程序显示“加载微调器”。控制台日志显示ajaxStart正在启动，但屏幕上没有任何可视微调器。

我做错了什么？请救命！

提前谢谢。

Answer 1

内部AJAX调用？（但在任何地方都适用）

$.ajax({ url: ..., 
    type:'post', dataType:'json',
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); },
    complete: function(){ fSpinner('hide'); },
    success: function( res ){...},
    error: function(e){ alert('Error: ' + e.responseText) }
});

以及功能本身：

function fSpinner( strShowOrHide ) {
    setTimeout( function(){
        $.mobile.loading( strShowOrHide );
    }, 1); 
}

Answer 2

将其包装在setTimeout中可以正常工作。我只需要一个简单的函数即可：

function loading(showOrHide) {
    setTimeout(function(){
        $.mobile.loading(showOrHide);
    }, 1); 
}

然后，当您想显示或隐藏微调器时，只需调用它：

loading('show');

或

loading('hide');

下面是一个愚蠢的JSFIDLE：http://jsfiddle.net/7UpW5/

Answer 3

什么jQuery Mobile留档缺乏有关成功执行的信息：

$.mobile.loading('show');

和

$.mobile.loading('hide');

它们将仅在pageshow事件期间显示。在任何其他情况下，都需要将它们包装到setinterval中，如下所示：

如果您对pageshow和其他jQuery移动页面事件一无所知，请查看本文，这是我的个人博客。或者在这里找到它。

首先，如果没有设置的间隔，您将无法显示/隐藏AJAX加载程序。只有一种情况下，在没有的情况下，这是可能的，那就是在pageshow事件期间。在任何其他情况下，需要设置间隔来启动加载程序。

下面是一个工作示例：http://jsfiddle.net/Gajotres/Zr7Gf/

    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    

    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);