使用JQuery mobile创建ListView无法正常工作II

时间:2013-07-19 15:12:53

标签: javascript listview jquery-mobile dynamic

很抱歉再次打扰你,但遇到了ListView的另一个问题。 Gajotres(look here)的答案当然有效,但实际上我的代码有点复杂:我提到的ListView是一个动态创建的弹出窗口。并且“新”刷新没有帮助。我的代码:

   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

我必须得到什么才能让它发挥作用?

1 个答案:

答案 0 :(得分:2)

让我谈谈你的问题。在显示弹出窗口之前,您应该将其附加到页面内容。主要是因为 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");
});