Question

我试图在用户点击我的重置按钮时显示JQM的加载gif（因为该过程有点长）。我已尝试过以下内容，但加载动画未显示。

HTML：

<a id="resetbutton" class="ui-btn ui-btn-a ui-corner-all">Reset</a>

JS：

        $("#resetbutton").on("vclick",function(){
            $.mobile.loading( "show");
            var resetListsModelsOnDeferred = resetListsModelsOn(prodata,0, 0);
                    var highlightFunModelsDeferred = highlightFunModels(funfeatureOn, 0);
            addProImagesInSelect();
            addBrandImagesInSelect();
            $.when( resetListsModelsOnDeferred, highlightFunModelsDeferred ).then( function() {
                $.mobile.loading( "hide" );
            });
        });

事件是否在这里绑定了问题？

我也在为这款应用使用Phonegap 3.3。

由于

Answer 1

将您的代码更改为：

$(document).on("vclick","#resetbutton",function(){
    setTimeout(function(){
        $.mobile.loading( "show");
    }, 1);
    var resetListsModelsOnDeferred = resetListsModelsOn(prodata,0, 0);
            var highlightFunModelsDeferred = highlightFunModels(funfeatureOn, 0);
    addProImagesInSelect();
    addBrandImagesInSelect();
    $.when( resetListsModelsOnDeferred, highlightFunModelsDeferred ).then( function() {
    setTimeout(function(){
        $.mobile.loading( "hide" );
    }, 1);      
    });
});

首先我看不到你的HTML所以我把这个事件绑定到文档级别，因为这个应用程序不关心是否存在按钮。但在此之前，请为此事件添加警报。如果在您的情况下显示警报，请按照以下方式生效：

$("#resetbutton").on("vclick",function(){

或者如果仍未显示警报，请按以下方式使用：

$(document).on("vclick","#resetbutton",function(){

第二件事，使用setTimeout函数初始化/隐藏ajax加载器。这是对Web工具包浏览器的修复，他们无法在没有轻微延迟的情况下初始化jQuery Mobile ajax加载器。

更新

试试这个解决方案：

$(document).on("vclick","#resetbutton",function(){
    setTimeout(function(){
        $.mobile.loading( "show");
        var resetListsModelsOnDeferred = resetListsModelsOn(prodata,0, 0);
        var highlightFunModelsDeferred = highlightFunModels(funfeatureOn, 0);

        addProImagesInSelect();
        addBrandImagesInSelect();

        $.when( resetListsModelsOnDeferred, highlightFunModelsDeferred ).then( function() {
            setTimeout(function(){
                $.mobile.loading( "hide" );
            }, 1);      
        });     
    }, 1);
});

Jquery Mobile：在按钮点击时显示/隐藏加载动画

1 个答案:

更新