0

我失败了，但我无法解决这个问题。我有这个代码：

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

2 回答 2

0

因为您是动态附加的，所以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() 的更多信息

于 2012-12-12T10:06:44.693 回答
0

现在我在这个位置：

<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"); 而且效果很好

于 2012-12-13T07:19:34.807 回答