Javascript에서 JQuery Mobile을 사용하여 목록에 항목 추가

JavaScript는 물론 JQM을 처음 사용합니다. 동적으로 생성 될 목록을 포함하는 모바일 애플리케이션을 개발 중입니다. 필자는 동적으로 생성 된 항목뿐만 아니라 정상적인 목록 항목을 생성하는 예제를 선택했습니다. 나는이 페이지에서 다음 예를 사용하고 있습니다 : 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은 jQuery를에 다르게 DOM 준비 통화를 처리 - 당신은 pageinit 다른 이벤트에 바인드해야 - 여기 참조 : http://api.jquerymobile.com/pageinit / –

활성 페이지에 동적으로 항목을 추가 한 후에는 위젯의 이름 .listview()를 호출하여 수동으로 (스타일) 요소를 강화해야합니다. 기존 목록보기에 li 요소를 추가 할 때

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

, 당신은 위젯을 refresh해야합니다.

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

Demo

출처

2013-12-14 22:50:01 Omar

Javascript에서 JQuery Mobile을 사용하여 목록에 항목 추가

답변

관련 문제