javascript - 使用 JQuery Mobile 创建 ListView 无法正常工作 II

Question

很抱歉再次打扰您，但该 ListView 遇到了另一个问题。 Gajotres ( look here ) 的答案当然有效，但实际上我的代码有点复杂:我提到的 ListView 在动态创建的弹出窗口中。而"new"刷新也无济于事。我的代码:

   var HlpStr =  'Wählen Sie die Checklist, die Sie laden wollen, durch Anklicken aus. '
            + '\n\nDer Download wird über die Schaltfläche "Checkliste laden" gestartet.' 
            + '\n\n Sie müssen mit dem Internet verbunden sein, um die Registrierung auszuführen!';

var html = "";
html += '<div data-role=header  data-theme="d">';
html +=   '<h1>Market-Value Checkliste laden</h1>';   
html += '</div>';

html += '<div data-role=content>';
html +=    '<p>' +  HlpStr + '</p>'; 
html +=    '<p> </p>'; 
html +=    "<ul id='ChecklistListex' data-role=listview data-theme='d' data-divider-theme='d' data-inset=true>";
html +=       '<li id="listDividerAktuelleChecklistx" data-role=list-divider>yyy Checklist</li>';
html +=       "<li id='LoadChecklistx'> <a> Checkliste laden </a></li>";
html +=    "</ul>"
html +=    '<p> </p>'; 
html +=    '<a id=BTNChecklisteLaden data-role="button" data-inline="true" data-mini="true" >Checkliste laden</a>';      
html +=    '<a id=BTNChecklisteLadenAbbrechen data-role="button" data-inline="true" data-mini="true" >abbrechen</a>';      
html += '</div>';

    var $popUp = $('<div align="center" />').popup({
        id : "DialogChecklistLaden",
        dismissible : false,
        theme : "b",
        positionTo : "window",
        tolerance : "30,40",
        overlayTheme : "b",
        transition : "pop",
        "data-add-back-btn": "true"
    }).bind("popupafterclose", 
       function() {
                    //remove the popup when closing
           $(this).remove();
    });
    $(html).appendTo($popUp);    
    $popUp.popup("open").trigger("create");

这是我得到的:see picture here http://www.market-value.de/downloads/ul.jpg

我需要做什么才能让它工作？

Answer 1

让我谈谈你的问题。在显示弹出窗口之前，您应该将其附加到页面内容。主要是因为 trigger('create') 用在内容 DIV 上，没有意义用在其他任何东西上。在这种情况下，弹出窗口需要成为页面的一部分，trigger('create') 才能正常工作。虽然 trigger('create') 可以在内容 div 之外工作，但在 data-role="content"上使用它是安全的做法。

工作示例:http://jsfiddle.net/Gajotres/WC6ud/

$(document).on('pagebeforeshow', '#index', function(){ 
    var html = "";
    html += '<div data-role=header  data-theme="d">';
    html +=   '<h1>Market-Value Checkliste laden</h1>';   
    html += '</div>';

    html += '<div data-role=content>';
    html +=    '<p>Meh</p>'; 
    html +=    '<p> </p>'; 
    html +=    "<ul id='ChecklistListex' data-role=listview data-theme='d' data-divider-theme='d' data-inset=true>";
    html +=       '<li id="listDividerAktuelleChecklistx" data-role=list-divider>yyy Checklist</li>';
    html +=       "<li id='LoadChecklistx'> <a> Checkliste laden </a></li>";
    html +=    "</ul>"
    html +=    '<p> </p>'; 
    html +=    '<a id=BTNChecklisteLaden data-role="button" data-inline="true" data-mini="true" >Checkliste laden</a>';      
    html +=    '<a id=BTNChecklisteLadenAbbrechen data-role="button" data-inline="true" data-mini="true" >abbrechen</a>';      
    html += '</div>';

    var $popUp = $('<div align="center" />').popup({
        id : "DialogChecklistLaden",
        dismissible : false,
        theme : "b",
        positionTo : "window",
        tolerance : "30,40",
        overlayTheme : "b",
        transition : "pop",
        "data-add-back-btn": "true"
    }).bind("popupafterclose", 
            function() {
                //remove the popup when closing
                $(this).remove();
            });
    $(html).appendTo($popUp);    
    $popUp.appendTo('#DivChecklistListe');
    $('#DivChecklistListe').trigger('create');
    $('#DialogChecklistLaden').popup("open");
});