동적으로 생성하는 내용 JQuery 모바일 테마 지원

일부 제목 텍스트가 포함 된 헤더를 생성하려고하지만 추가 된 동적 내용에서 JQuery Mobile 테마가 지원되지 않습니다. 다른 것이 단추, 입력 텍스트 상자 등을 추가 할 때 동일한 결과가 발생합니다. etc :이 문제를 해결할 수있는 방법이 있습니까?동적으로 생성하는 내용 JQuery 모바일 테마 지원

<!DOCTYPE html> 
<html> 
<head> 
<title>Website Title</title> 
<meta name='Description' content="Describe your website here..."> 
<meta http-equiv='Content-Type' charset='utf-8' content='text/html;charset=ISO-8859-1'> 
<meta name='Keywords' content='words, describing, your, website'> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
<style type="text/css"> 
</style> 
<script type='text/javascript'> 
$(document).ready(function() { 
    var fixgeometry = function() { 
    /* Some orientation changes leave the scroll position at something 
    * that isn't 0,0. This is annoying for user experience. */ 
    scroll(0, 0); 

    /* Calculate the geometry that our content area should take */ 
    var header = $(".header:visible"); 
    var footer = $(".footer:visible"); 
    var content = $(".content:visible"); 
    var viewport_height = $(window).height(); 

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 

    /* Trim margin/border/padding height */ 
    content_height -= (content.outerHeight() - content.height()); 
    content.height(content_height); 
    }; /* fixgeometry */ 

    $(window).bind("orientationchange resize pageshow", fixgeometry); 

    $("input#submitheader").click(function() { 
    var headeropen = "<div data-role='header' " 
    var headercloseopenmark = "'>" 
    var headerheadingopen = "<h1>" 
    var pageheaderheading = $("input#headerheading").val(); 
    var headerheadingclose = "</h1>" 
    var headerclose = "</div>" 

    $("#1stpagename").append((headeropen) + (headercloseopenmark) + (headerheadingopen) + (pageheaderheading) + (headerheadingclose) + (headerclose));}); 

}); 
</script> 
</head> 
<body> 
<div data-role="page" class="pages" id="1stpagename"> 
    <div id="genoptions"> 
     Theme:<br> 
     <select name="selectthemeheader"> 
      <option value="a" selected="selected">Black</option> 
      <option value="b">Blue</option> 
      <option value="c">Gray</option> 
      <option value="d">Light Gray</option> 
      <option value="e">Yellow</option> 
     </select><br><br> 

     Fixed:<br> 
     <select name="selectfixedheaderoption"> 
      <option value="1">Yes</option> 
      <option value="2" selected="selected">No</option> 
     </select><br><br> 

     Heading:<br> 
     <input type="text" id="headerheading" placeholder="My Website" value="Placeholder"><br><br> 

     Heading Size:<br> 
     <select name="selectheaderheadingsize"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3" selected="selected">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
     </select><br><br> 

     <input value="Submit" type="submit" id="submitheader"> 
    </div> 
</div> 
</body> 
</html>

출처

2013-05-19 Michael Schwartz

내가 한 가지 중요한 문제를 언급하는 것을 잊었다 추가 할 수 있습니다. jQuery Mobile에서'.ready()'를 사용하지 마십시오. 그 값은'pageinit'입니다. – Omar

당신이 $('[data-role=page]').trigger('pagecreate');을 사용하여 자신의 마크 업을 향상시킬 필요가 동적으로 [data-role=header] 및 [data-role=footer]을 만들려면 여기 내 코드의 http://jsfiddle.net/fABC7/

여기 내 바이올린입니다.

jQuery Mobile의 각 위젯은 create, pagecreate, updatelayout 또는 refresh을 사용하여 향상되어야합니다. 이 방법을 사용하는 것은 향상시키려는 항목에 달려 있습니다. Enhancing Dynamic Contents에 대해 자세히 확인하십시오.
Demo

새로운 헤더를 추가 한 후,

$('[data-role=page]').trigger('pagecreate');

출처

2013-05-19 07:17:20 Omar

이렇게하면 두통이 생겼습니다. 정말 고맙습니다. –

@ mikethedj4 당신은 환영합니다 :) – Omar

동적으로 생성하는 내용 JQuery 모바일 테마 지원

답변

관련 문제