Динамическое создание контента, поддерживающего тему JQuery Mobile

Я пытаюсь сгенерировать заголовок с текстом заголовка, но тема JQuery Mobile не поддерживается в добавленном динамическом содержимом. Тот же результат возникает, когда что-то еще добавляется, вводится текстовое поле и т. Д.: И т. Д.: Есть ли все-таки исправить это?Динамическое создание контента, поддерживающего тему JQuery Mobile

Вот моя скрипка - http://jsfiddle.net/fABC7/

Вот мой код:

<!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

Я забыл упомянуть один важный вопрос. Не используйте '.ready()' с jQuery Mobile, его эквивалент '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

ответ

Смежные вопросы