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');
});

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

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

1 个答案: