如何動態更改jquery彈出窗口的文本？

Question

我試圖動態更改彈出窗口的文本。我想這可能是這樣的：

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

這意味着，在彈出的文本將是「中..」直到函數加載後（）完成。然後它會被「加載！」

我已經嘗試了這一點，其中許多其他不同的方法，其中沒有工作。

有人可以幫助我解決這個問題嗎？

預先感謝您！

編輯 對不起，我忘了提及我正在使用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"); 
}); 

UPDATE： 最後你可以把它放在一起：

$("#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說明了一些冗長的工作