1

我想在ajaxStart. 我为此使用了一个弹出窗口，以便背景淡出并变为非活动状态。也就是说，如果有其他方法可以实现这一点（而不是使用弹出窗口），我也愿意尝试一下。

问题是，虽然包含 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>

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

4

1 回答 1

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 之前运行。否则，扩展在页面初始化期间实例化的弹出窗口小部件将为时已晚。

于 2013-08-21T15:05:42.697 回答