Question

I got a failure but I cant fix this problem. I have this code:

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

The list works very well but I want to open the popup div by selecting the li element.
If I click nothing happen.

It should be look like this example which is working:

<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

Now iam at this position:

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

But its not working. The list is correctly create and i see my “popups” under my list wich is in my Section “popup_area”. If i click on the icon in the list:

i mean this section -> <a href="#' + titel + '" data-rel="popup" data-icon="alert" data-transition="slide">Details</a>

the Display change colour a little bit white (like by popup) but nothing is showing.
So i think after create dynamic section id=”popup_area” i must aktivate the popup funktion anyway.

Like after create dynamic list elements -> $('#uList').listview("refresh");
This was neccesery for aktivate the typica![enter image description here][1]l list design of Jquery.

Anybody an idea? PLease help

Screenshot : http://image-upload.de/image/7oxg97/15b1b6d443.png

Update:

I fix this problem by myself. Thx 😛

i replace $(‘#popup_area’).append($pop.popup()); with $(‘#popup_area’).append($pop)trigger(“create”);
and it works very well