javascript - 如何动态更改 jquery 弹出窗口的文本？

Question

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

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

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

我试过这个，还有很多其他不同的方法，但都没有用。

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

提前致谢!

编辑对不起大家，我忘了说我使用的是 jQuery Mobile。

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

Answer 1

一种改变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');
});

更新 2:更新 jsFiddle说明一些冗长的工作