動態生成支持JQuery Mobile主題的內容

我試圖用一些標題文本生成一個標題，但是在添加的動態內容中不支持JQuery Mobile主題。同樣的結果發生在其他東西被添加按鈕，輸入文本框等：等：有無論如何解決這個問題？動態生成支持JQuery Mobile主題的內容

這裏是我的代碼：

<!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=header]和[data-role=footer]動態，你需要使用$('[data-role=page]').trigger('pagecreate');，以提高他們的標記。

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 Mobile主題的內容

回答

相關問題