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>

然后链接没有样式，它只显示一个“确定”链接。如果我将弹出窗口移动到对话框然后它全部工作，按钮和所有，但由于我希望看到下面的页面，我想保持弹出窗口。

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

修改：我的案例的解决方案是，弹出窗口div必须在页面div内，而不是在其外部（{1}}作为对话div会），如下所示：

之前（错误）：

<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>

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

1 个答案: