2

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に移動する必要があることです。divdiv

前（間違っている）：

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

1 に答える 1

0

jQMマークアップを更新する必要があります

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>
于 2012-11-13T13:34:57.437 に答える