如何动态更改jquery弹出窗口的文本? [英] How do I change the text of a jquery popup dynamically?

问题描述

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

I'm trying to change the text of a popup dynamically. I thought it might be something like this:

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

这意味着在功能load()完成之前，弹出文本将为"Loading ..".然后它将是已加载！"

This means that the popup text would be "Loading.." until after the function load() finished. Then it would be "Loaded!"

除了许多其他方法外，我都尝试过这种方法，但没有一种有效.

I've tried this, among many other different approaches, none of which worked.

有人可以帮助我吗?

提前谢谢！

编辑 抱歉，每个人，我忘了提到我使用的是jQuery Mobile.

EDIT Sorry everyone, I forgot to mention I was using jQuery Mobile.

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

推荐答案

一种更改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事件中创建(或更改)弹出窗口的内容

Another approach would be create(or change) popup's content in a click event

给出标记

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

更新: 最后，您可以将所有内容放在一起:

UPDATE: And finally you can put it all together:

$("#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 以说明一些冗长的工作

UPDATE2: Updated jsFiddle to illustrate some lengthy work

这篇关于如何动态更改jquery弹出窗口的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！