jquery - jquery mobileのポップアップに動的データを追加するには?

Question

私popup()はjqueryモバイルで使用しました

$("#id").popup();

ポップアップが開いているときに、その「id」要素にデータを追加したい..どのように?

Answer 1

これを JavaScript に追加します。

$("#id").on('popupafteropen', function(){
    // do whatever here
    $(this).append("Add some HTML!");
    $(this).html("Or replace the HTML contents.");
});

popup プラグインのイベントを参照してください: http://jquerymobile.com/test/docs/pages/popup/events.html

Answer 2

$('#id').attr('data-some', 'some').popup();

また

$('#id').data('some', 'some').popup();

data()について

Answer 3

そのため、jQuery モバイルでは、ajax 呼び出しを介してリンクを生成している場合、常に問題が発生します。これは、初期化時に、jQuery モバイルが要素に関する多くのことを変更する傾向があるためです。

また、私のようなプロジェクトに取り組んでいる場合、ポップアップが必要な場所がたくさんあり、アプリが遅くなる可能性があるため、複数のポップアップを生成し続けることはできません。そのため、ポップアップを 1 つだけ作成し、誰かがリンクをクリックするたびにコンテンツを変更します。

あなたの質問を見てフィドルを作成しました。やってみよう、乾杯

http://jsfiddle.net/tanwaniniranjan/0hzco633/3/

html:

<a href="#popupBasic" data-rel="popup" data-transition="flip" class="popupcontentchanger">Open Popup</a>

<div data-role="popup" id="popupBasic" data-overlay-theme="a">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <div id="changehere"> <!-- We will be changing content in this div -->

    </div>
</div>

jQuery:

//script to change content
$(document).on("click",".popupcontentchanger",function(event){
    var newhtml = $(this).html();
    $(document).on("popupafteropen", "#popupBasic", function (e) {
        $("#popupBasic #changehere").html(newhtml);
    });
});

//script to clear current html in the popup, on closing of popup so that every time it opens, it loads new content, without initially showing the old content. would have been better if jquery mobile added another method: popupbeforeopen :P
$(document).on("popupafterclose", "#popupBasic", function (e) {
    $("#popupBasic #changehere").html('');
});