在Javascript中使用JQuery Mobile添加項目

我是JQM以及JavaScript的新手。我正在開發一個移動應用程序，其中將包含一個將被動態生成的列表。我已經選擇了一個生成正常列表項以及動態生成項目的例子。我使用此頁面上下面的例子：http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH11.php 在Javascript中使用JQuery Mobile添加項目

<!DOCTYPE html> 
<html> 
<head> 
    <meta name=viewport content="user-scalable=no,width=device-width" /> 
    <link rel=stylesheet href=jquery.mobile/jquery.mobile.css /> 
    <script src=jquery.js></script> 
    <script src=jquery.mobile/jquery.mobile.js></script> 
</head> 

<body> 

<div data-role=page id=home> 
    <div data-role=header> 
    <h1>Home</h1> 
    </div> 

    <div data-role=content> 
    <ol id=list1 data-role=listview data-inset=true> 
     <li data-role=list-divider>Static list</li> 
     <li data-icon=delete> 
     <a href=#>Element 1.1</a> 
     </li> 
     <li data-icon=delete> 
     <a href=#>Element 1.2</a> 
     </li> 
     <li data-icon=delete> 
     <a href=#>Element 1.3</a> 
     </li> 
    </ol> 
    </div> 
</div> 

</body> 
</html> 

<script> 

var html = ""; 
html += "<ol id=list2 data-role=listview data-inset=true>"; 
html += "<li data-role=list-divider>Dynamic list</li>"; 
html += "<li data-icon=delete>"; 
html +=  "<a href=#>Element 2.1</a>"; 
html += "</li>"; 
html += "<li data-icon=delete>"; 
html +=  "<a href=#>Element 2.2</a>"; 
html += "</li>"; 
html += "<li data-icon=delete>"; 
html +=  "<a href=#>Element 2.3</a>"; 
html += "</li>"; 
html += "</ol>"; 

$("#home div:jqmData(role=content)").append (html); 

</script>

如果我移動腳本部分插入功能，說的AddItem（）{}並調用它追加動態項目下拉，然後其他項目格式不正確並且顯示爲簡單文本。

我想弄清楚，如果我只是修改以下行：

<li data-icon=delete> 
    <a href=# onclick="AddItem()">Element 1.1</a> 
    </li>

和腳本轉移到下面的函數，它將開始行爲異常：

function AddItem() 
{ 
    var html = ""; 
    html += "<ol id=list2 data-role=listview data-inset=true>"; 
    html += "<li data-role=list-divider>Dynamic list</li>"; 
    html += "<li data-icon=delete>"; 
    html +=  "<a href=#>Element 2.1</a>"; 
    html += "</li>"; 
    html += "<li data-icon=delete>"; 
    html +=  "<a href=#>Element 2.2</a>"; 
    html += "</li>"; 
    html += "<li data-icon=delete>"; 
    html +=  "<a href=#>Element 2.3</a>"; 
    html += "</li>"; 
    html += "</ol>"; 

    $("#home div:jqmData(role=content)").append (html); 
}

是否有人可以幫助我。

感謝&問候

======編輯========= 感謝奧馬爾！這真的很有幫助。

正如我打算動態地創建我已經改變了功能，如下一個多級列表，以便遞歸調用下一級菜單：

function CreateMenu(x) 
{ 
    x++; 
    var html = ""; 
    html += "<ol id=list2 data-role=listview data-inset=true>"; 
    html += "<li data-role=list-divider>Dynamic list</li>"; 
    html += "<li data-icon=arrow-r>"; 
    html +=  '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.1</a>'; 
    html += "</li>"; 
    html += "<li data-icon=arrow-r>"; 
    html +=  '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.2</a>'; 
    html += "</li>"; 
    html += "<li data-icon=arrow-r>"; 
    html +=  '<a onclick="CreateMenu(' + x + ')">Element ' + x + '.3</a>'; 
    html += "</li>"; 
    html += "</ol>"; 

    $("[data-role=content]").empty(); 
    $("[data-role=content]").append(html); 
    $("#list2").listview(); 
    return; 
}

雖然它的工作，但是，我應該怎麼做？或者我錯過了任何正常的約定？

此外，如果你可以請指導我一個易於理解的資源來學習JQuery選擇器和其他類似於refresh（）的入門級人員需要的東西。

感謝&問候

Anjum

來源

2013-12-14 Anjum

JQM處理DOM準備調用不同的jQuery的 - 你需要結合其它活動，如pageinit - 在這裏看到：http://api.jquerymobile.com/pageinit / –

動態追加的項目活動頁面後，你需要通過調用插件的名字.listview()手動提升（風格）的元素。

$("[data-role=content]").append(html); 
$("#list2").listview();

當您添加li元素添加到現有的列表視圖，你需要refresh小部件。

$("#list2").append("<li>foo</li>").listview("refresh");

Demo

來源

2013-12-14 22:50:01 Omar

在Javascript中使用JQuery Mobile添加項目

回答

相關問題