jQuery 모바일 기반 페이지에서 DOM에 요소 삽입

모바일 장치에서 웹 앱이 아닌 것으로 끝나는 jQuery Mobile 앱을 실험 중이므로 모든 콘텐츠가 로컬이어야합니다. 그 이유는 (내가 생각하기에)태그로 구분 된 단일 페이지에서 응용 프로그램을 생성해야합니다. 그렇지 않으면 jQuery Mobile의 ajax 로딩 메커니즘이 작동하지 않는 것 같습니다.jQuery 모바일 기반 페이지에서 DOM에 요소 삽입

응용 프로그램은 로컬 저장소 DB에서 데이터를 읽고 jQuery Mobile을 사용하여 스타일이 지정된 기본 정렬되지 않은 목록에 페이지를 표시합니다. 내 $(document).ready() 기능에

은 내가 DB 조회를 실행하고 각각의 결과를 위해, 나는 내 DB 결과 주위 <li> 태그를 생성하고 .list 내 <ul> 태그의 클래스이고 다음 $(".list").append(li_str);를 호출합니다.

jQuery Mobile이없는 것처럼 페이지가 렌더링됩니다. 각 <li>에 올바른 데이터가 표시되지만 올바르게 표시되지 않습니다. jQuery를 모바일 태그를 수정하는 등 새로운 클래스

을 많이 삽입 것 같습니다 어쩌면 내가 페이지를 구축해야 -

내가 하드 코드 페이지 HTML의 <li> 태그 버전으로이 결과를 비교 페이지로드 사이클의 이전 DB에서? 어떤 제안?

출처

2011-02-10 speedwell

문제는 this issue입니다.

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 

    $(function() 
    { 
     build_dynamic_content(); 
     $('ul.mainlist').listview(); 
    }); 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

죄송 코드 덤프에 대해 : (링크 된 스레드에 설명 된대로)의 모든 요소가 생성 될 때까지 당신은 목록보기를 생성 지연시킬 수,

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 
    <script> 
    function build_dynamic_content() 
    { 
     var num_entries = 5; 

     for (var i = 0; i < num_entries; ++i) 
     { 
      var li_str = "<li id=\"" + i + "\"><a href=\"#\">" + "Entry number " + (i + 1) + "</a>"; 
      li_str += "<img src=\"" + "icon.png" + "\" />"; 
      li_str += "</li>"; 

      $(".mainlist").append(li_str); 
     } 
    } 
    </script> 
</head> 

<body> 
    <div data-role="page" id="list" data-fullscreen="false"> 
     <div data-role="content"> 
      <ul class="mainlist" data-role="listview"> 
       <li id="0"><a href="#">Test entry</a><img src="icon.png"/></li> 
      </ul> 
     </div> 
    </div> 
<script>build_dynamic_content();</script> 
</body> 
</html>

대안 : 그래서, 당신의 코드를 변경 ; 나는 jsfiddle에서 일할 수 없었다.

출처

2011-02-10 01:18:37

1.0. 문제가있는 DB가없는 테스트 앱을 만들었습니다. 목록의 첫 번째 항목은 하드 코딩되어 올바르게 표시됩니다. 나머지는 동적으로 생성되며 다음을 수행하지 않습니다. http://pastebin.com/1LTDZ4nE 내가 잘못하고있는 것을 볼 수 있습니까? – speedwell

@speedwell : 내 편집 참조. –

은 완벽하게 작동했습니다. 참으로 많은 감사드립니다. – speedwell

매트의 대답은 질문에 대한 일반적인 대답이 아닙니다. 나는 이미 다른 질문에서 많은 것을 다루었 다.

위의 내용은 목록보기에서 작동하지만 일반적으로 내용이 아닙니다.

jQuery Mobile에서 DOM에 요소를 추가하려면 .page() 함수를 알아야합니다.

는 그 http://jquerymobiledictionary.pl/faq.html

출처

2011-02-10 07:57:39 naugtur

이 사이트에는 연결할 수 없습니다. OP의 문제에 대한 유일한 정답이 포함되어 있기 때문에 불행합니다. http://jquerymobiledictionary.pl/faq.html에서 찾을 수 : => DOM을 업데이트 한 후 삽입 된 요소에 대해 trigger ('create')를 호출하십시오 (예 : $ ('# myelement') .html ('updated content'). – chrisv

예, 사이트를 도메인으로 옮기고 대부분의 게시물을 업데이트했지만 너무 많은 중복이 있으므로 모든 것을 찾지 못했습니다. 신고 해 주셔서 감사합니다. – naugtur

어느 $("changed-parent-element").listview()도 정말 나를 위해 일한 $("changed-parent-element").trigger("create")를 호출에 자습서를했다.

$("changed-parent-element").listview("refresh");

버전 : 는 jQuery를 모바일 스타일을 DOM의 콘텐츠를 여러 번 변경하고 다시 실행하기 위해 나는이 필요 jQuery를 모바일 어떤 다른 매트을하지 않은 것으로 보입니다 RC2

출처

2011-11-08 17:55:21

jQuery 모바일 기반 페이지에서 DOM에 요소 삽입

답변

관련 문제