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>

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”中看到我的“弹出窗口”。如果我点击列表中的图标：

我的意思是这一节 - ＆gt; <a href="#' + titel + '" data-rel="popup" data-icon="alert" data-transition="slide">Details</a>

显示更改颜色有点白（如弹出窗口），但没有显示。所以我认为在创建动态部分id =“popup_area”之后我必须激活弹出式功能。

在创建动态列表元素之后 - ＆gt; $('#uList').listview("refresh"); 这对于激活这个典型来说是必要的！[在此处输入图像描述] [1] l列出Jquery的设计。

有人有想法吗？请帮忙

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

更新：

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

我替换$（'＃popup_area'）。append（$ pop.popup（））; with $（'＃popup_area'）。append（$ pop）trigger（“create”）; 而且效果很好

动态添加<li>与PopUp功能不起作用</li>

2 个答案: