jquery - 動的追加
ポップアップ機能が動作しない

Question

失敗しましたが、この問題を修正できません。私はこのコードを持っています:

<script>
    //Init Historyview
    $('#history').live('pageinit', function () {
        $.getJSON('../BackEnd/GetHistory.aspx', function (json) {
            $.each(json, function (titel, date) {
                if (date.status == "2") {
                    $('#historylist').find('ul.dynlist').append('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + date.titel + '" data-rel="popup" data-icon="alert" data-transition="slide">Details</a></li>');
                }
                else {
                    if (date.status == "3")
                        $('#historylist').find('ul.dynlist').append('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + date.titel + '" data-rel="popup" data-icon="delete" data-transition="slide">Details</a></li>');
                    else
                        $('#historylist').find('ul.dynlist').append('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + date.titel + '" data-rel="popup" data-icon="check" data-transition="slide">Details</a></li>');
                }
                $('#uList').listview("refresh");
                $(document).html('<div data-role="popup" id="" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">Hallo</div>');
                $.mobile.page();
            });
        });
    });        
</script>

リストは非常にうまく機能しますが、要素divを選択してポップアップを開きたいです。liクリックしても何も起こりません。

動作している次の例のようになります。

<ul data-role="listview" data-split-icon="plus" data-split-theme="b">
    <li><a><img class="rotate" src="bilder/Rechnung.jpg"><h1>Krankenhaus Basel</h1><p>24.11.2008</p></a><a href="#rechnung" data-rel="popup"  data-icon="check" data-transition="slide">Details</a></li>
    <li><a><img class="rotate" src="bilder/rechnung-ausdruck.jpg"><h1>Praxis Fuchs</h1><p>11.04.2012</p></a><a href="#rechnung2" data-rel="popup" data-icon="alert" data-transition="slide">Details</a></li>
    <li><a><img class="rotate" src="bilder/RechnungBericht.jpg"><h1>Praxis Steinig</h1><p>12.11.2012</p></a><a href="#rechnung3" data-rel="popup" data-icon="delete" data-transition="slide">Details</a></li>
</ul>

<div data-role="popup" id="rechnung" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
    <img src="bilder/Rechnung.jpg"><p>Rechnung wurde akzeptiert</p> 
</div>

<div data-role="popup" id="rechnung2" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
    <img src="bilder/rechnung-ausdruck.jpg"><p>Rechnung in der Verarbeitung</p> 
</div>

<div data-role="popup" id="rechnung3" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
    <img src="bilder/RechnungBericht.jpg"><p>Rechnung wurde noch nicht bearbeitet</p>   
</div>

score 0 · Accepted Answer

動的に追加するため、それらのメソッドliを手動で呼び出す必要があります。popup()これを試して：

$.each(json, function (titel, date) {
    var $li;
    if (date.status == "2") {
        $li = $('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + date.titel + '" data-rel="popup" data-icon="alert" data-transition="slide">Details</a></li>');
    }
    else {
        if (date.status == "3")
            $li = $('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + date.titel + '" data-rel="popup" data-icon="delete" data-transition="slide">Details</a></li>');
        else
            $li = $('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + date.titel + '" data-rel="popup" data-icon="check" data-transition="slide">Details</a></li>');
    }
    $('#historylist').find('ul.dynlist').append($li.popup());
    $('#uList').listview("refresh");
    $(document).html('<div data-role="popup" id="" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">Hallo</div>');
    $.mobile.page();
});

jQm APIのpopup（）に関する詳細情報

score 0 · Accepted Answer

今、私はこの位置にいます：

<section id="popup_area">

</section>

<script>
    //Init Historyview
        $.getJSON('../BackEnd/GetHistory.aspx', function (json) {
            $.each(json, function (titel, date) {
                var $li;
                if (date.status == "2") {
                    $li = $('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + titel + '" data-rel="popup" data-icon="alert" data-transition="slide">Details</a></li>');
                }
                else {
                    if (date.status == "3")
                        $li = $('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + titel + '" data-rel="popup" data-icon="delete" data-transition="slide">Details</a></li>');
                    else
                        $li = $('<li><a><img class="rotate" src="' + date.beleg + '"><h1>' + date.titel + '</h1><p>' + date.date + '</p></a><a href="#' + titel + '" data-rel="popup" data-icon="check" data-transition="slide">Details</a></li>');
                }
                $('#historylist').find('ul.dynlist').append($li);
                $('#uList').listview("refresh");
                $pop = $('<div data-role="popup" id="' + titel + '" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;"><img class="rotate" src="' + date.beleg + '"></div>');
                $('#popup_area').append($pop.popup());
            });
        });

</script>

しかし、うまくいきません。リストは正しく作成され、セクション「popup_area」にあるリストの下に「ポップアップ」が表示されます。リストのアイコンをクリックすると：

私はこのセクションを意味します - ><a href="#' + titel + '" data-rel="popup" data-icon="alert" data-transition="slide">Details</a>

ディスプレイの色が（ポップアップのように）少し白くなりますが、何も表示されません。したがって、動的セクション id="popup_area" を作成した後、とにかくポップアップ機能を有効にする必要があると思います。

動的リスト要素を作成した後のように ->$('#uList').listview("refresh"); これは typica をアクティブ化するために必要でした![ここに画像の説明を入力][1]Jquery のリスト設計。

誰でもアイデアはありますか？助けてください

スクリーンショット: http://image-upload.de/image/7oxg97/15b1b6d443.png

アップデート：

私は自分でこの問題を解決します。Thx :-P

$('#popup_area').append($pop.popup()); を置き換えます。$('#popup_area').append($pop)trigger("create"); を使用そしてそれは非常にうまく機能します

jquery - 動的追加ポップアップ機能が動作しない

2 に答える 2

Related

Reference

jquery - 動的追加
ポップアップ機能が動作しない