1

我正在尝试动态更改弹出窗口的文本。我认为它可能是这样的：

$("#mypopup").text("Loading...");
$("#mypopup").popup("open");
load();
$("#mypopup").text("Loaded!");

这意味着弹出文本将是“正在加载..”，直到函数 load() 完成。然后它将是“加载！”

在许多其他不同的方法中，我已经尝试过这个，但都没有奏效。

有人可以帮我解决这个问题吗？

先感谢您！

编辑 对不起大家，我忘了提到我正在使用 jQuery Mobile。

这里有更多信息http://jquerymobile.com/test/docs/pages/popup/index.html

4

1 回答 1

3

更改内容的方法之一popup

鉴于您有这样的标记：

<div data-role="page" id="page1">
    <div data-role="content">
        <a id="btn2" href="#popup" data-role="button" data-transition="flip" data-rel="popup">Open a popup</a>
        <div data-role="popup" id="popup" data-overlay-theme="a">
            <h1>It's a popup</h1>
        </div>
    </div>
</div>

您可以处理popupbeforeposition和/或popupafteropen事件

$(document).on("pageinit", "#page1", function(){
    $("#popup").on("popupbeforeposition", function(event, ui) {
        $(this).append("<p>I've been added to popup!</p>");
    });
    $("#popup").on("popupafteropen", function(event, ui) {
        $(this).append("<p>It has been added after I'm open!</p>");
    });
});

另一种方法是在click事件中创建（或更改）弹出窗口的内容

鉴于标记

<a id="btn1" href="#" data-role="button" data-transition="flip">Dynamic popup</a>
<div data-role="popup" id="popup2" data-overlay-theme="e">
</div>

你可以做

$("#btn1").click(function(){
    $("#popup2").html("<h1>Header</h1><p>This is the popup's message.</p>").popup("open");
});

更新： 最后你可以把它们放在一起：

$("#btn1").click(function(){
   $.mobile.loading('show', {theme:"e", text:"Loading the content...", textonly:true, textVisible: true});
    setTimeout(function(){
        //Do some lengthy work here
        doWork();
        //Show the popup
        $("#popup2").html("<h1>Header</h1><p>This is the popup's message.</p>").popup("open");
    }, 50);
});
$("#popup2").on("popupafteropen", function(event, ui) {
    $.mobile.loading('hide');
});

UPDATE2：更新了 jsFiddle以说明一些冗长的工作

于 2013-01-21T01:05:56.130 回答