从代码启动的 jQM 弹出窗口中未设置样式的按钮

Question

我正在使用 jQM 弹出窗口来“提醒”某些用户。例如，我发出$.ajax() 请求，如果响应有问题，我会弹出一个弹出窗口。 像这样的：

<div data-role="popup" id="popup">
    <p id="popupMsg"></p>
</div>

$("#popupMsg").html(msg);
$("#popup").popup({
    history:false,
    overlayTheme: "a"
}).popup('open');

一切正常，但如果我将弹出窗口更改为包含按钮，这样：

<div data-role="popup" id="popup">
    <p id="popupMsg"></p>
    <a href="#" data-role="button" data-rel="back" data-theme="c">Ok</a>
</div>

然后链接没有样式，它只会显示一个“Ok”链接。 如果我将弹出窗口移动到对话框中，那么按钮和所有内容都可以正常工作，但是由于我希望看到下面的页面，所以我想将其保留为弹出窗口。

我错过了什么吗？我看到了很多关于弹出窗口/对话框的问题，但它们都是指单击一个按钮来显示它们。 我使用 jquery-1.8.2 和 jquery.mobile-1.2.0。

---

编辑：我的情况的解决方案是弹出窗口div 必须进入页面div，而不是外部（作为对话框@ 987654326@ 会），像这样：

之前（错误）：

<div data-role="page">
    <div data-role="content">
        ...page stuff...
    </div>
</div>
<div data-role="popup" id="popup">
    <p id="popupMsg"></p>
    <a href="#" data-role="button" data-rel="back" data-theme="c">Ok</a>
</div>

之后（右）：

<div data-role="page">
    <div data-role="content">
        ...page stuff...
        <div data-role="popup" id="popup">
            <p id="popupMsg"></p>
            <a href="#" data-role="button" data-rel="back" data-theme="c">Ok</a>
        </div>
    </div>
</div>

Answer 1

您需要刷新 jQM 标记

• http://jsfiddle.net/xvvCA/1/
• http://jsfiddle.net/xvvCA/（内嵌按钮）

JS

var msg = 'Look! A new button!';

$("#popupMsg").html(msg);
$("#popup").popup({
    history:false,
    overlayTheme: "a"
}).popup('open');

$('#okButton').button('refresh'); // you need to refresh jQM markup

HTML

<div data-role="page">
    <div data-role="content">

        <div data-role="popup" id="popup">
            <p id="popupMsg"></p>
            <a href="#" data-role="button" data-rel="back" data-theme="c" id="okButton">Ok</a>
        </div>

    </div>
</div>