使用 PopUp 功能动态添加的 <li> 不起作用

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>

列表运行良好，但我想通过选择li 元素打开弹出窗口div。 如果我点击什么都不会发生。

它应该看起来像这个正在工作的例子：

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

Answer 1

因为您是动态附加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();
});

More information on popup() in the jQm API

Answer 2

现在我在这个位置：

<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]l 列表设计的 Jquery。

有人有想法吗？请帮忙

截图：http://image-upload.de/image/7oxg97/15b1b6d443.png

更新：

我自己解决了这个问题。谢谢：-P

我替换 $('#popup_area').append($pop.popup()); with $('#popup_area').append($pop)trigger("create"); 而且效果很好