在ajaxStart（）上打开jQuery移动弹出窗口

Question

我想在ajaxStart上显示一个旋转的加载器。 我为此使用了一个弹出窗口，以便背景淡出并变为非活动状态。 也就是说，如果还有其他方法可以实现此目的（而不是使用弹出窗口），则id也愿意尝试一下。

问题是，虽然在页面加载和单击按钮时都执行了包含AJAX调用的相同功能，但加载器仅在页面加载时才首次显示。 我放置了一些控制台日志，并验证了ajaxStart和ajaxComplete确实被触发，但是在单击按钮后进行AJAX调用时，弹出窗口无法打开。

JavaScript：

$(document).ready(function(){
    $( document ).ajaxStart(function() {
        $("#loader").html("<img src='../images/ajax-loader.gif'/>").popup("open");
    }).ajaxComplete(function() {
        $("#loader").popup("close");
    });
    // do other stuff

    loadData();

    $("#button").click(function(){
        loadData(); 
    });
});

function loadData(){
     //make an ajax call to fetch data
}

HTML：

<div data-role="popup" data-shadow="false" data-corners="false" class="loader1" 
  id="loader" data-overlay-theme="a" data-theme="none" data-dismissible="false" >
</div>

可能是什么问题，或者是否有其他解决方案可以达到预期的结果？

Answer 1

首先，简短的答案：jQuery Mobile一次仅支持一个活动弹出窗口（目前）。 该文件说：

注意：不允许链接弹出窗口
该框架目前不支持弹出窗口的链接，因此无法嵌入从一个弹出窗口到另一个弹出窗口的链接。 在弹出窗口中所有带有data-rel="popup"链接将根本不执行任何操作。

我过去几次遇到这个问题，不得不绕开它。 以下代码是我当前正在使用的解决方案，并且到目前为止（使用jQuery Mobile 1.3.2）效果很好。

$(document).on("mobileinit", function() {
    $.widget("mobile.popup", $.mobile.popup, {
        _trigger: function(type, event, data) {
            return this._suspended ? undefined : this._super(type, event, data);
        },
        _openPrereqsComplete: function() {
            this._super();
            delete this._suspended;
        },
        open: function(options) {
            var activePopup = $.mobile.popup.active;
            if (activePopup) {
                activePopup._suspended = true;
                activePopup._close(true);
                this.element.one("popupafterclose", function() {
                    activePopup.open();
                });
            }
            this._super(options);
        }
    });
});

简而言之，该代码就地扩展了弹出窗口小部件以引入“已暂停”状态。 如果弹出窗口小部件处于该状态，则所有事件均被静音。

然后， open()方法被重载以检测另一个弹出窗口是否已经处于活动状态。 在这种情况下，它将暂停并关闭该弹出窗口（不执行任何动画，因此将其立即关闭），然后打开新弹出窗口，并安排在关闭新弹出窗口时将其取消悬浮并重新打开。

请注意，代码绑定到mobileinit事件，因此它必须在包含jQuery 之后但包含jQuery Mobile 之前运行。 否则，扩展在页面初始化期间实例化的弹出窗口部件将为时已晚。