Динамическое добавление страницы в jQuery Mobile не работает - PullRequest
Новая
       2

Динамическое добавление страницы в jQuery Mobile не работает

0 голосов
/ 10 августа 2011

Когда я создаю совершенно новую страницу в jQuery Mobile, страница создается, но когда я нажимаю на ссылку с идентификатором, указывающим на только что созданную страницу, она не работает.Ссылка на элемент списка остается выбранной (синяя, в стандартной теме), но сама страница не загружается.

Страница создается путем добавления ее к телу: 

$('body').append('<div id="' generatedId '" data-role="page"><div data-role="header"><h2>Page</h2></div><div data-role="content">content</div></div>');

КогдаЯ отключаю jQuery Mobile, вы можете ясно видеть, что страница создается, но с jQM она недоступна.

Что я делаю не так?

1 Ответ

2 голосов
/ 12 августа 2011

У меня сработало следующее ... 

<!DOCTYPE html>
<html>
 <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>   
<script type="text/javascript">
$(document).ready(function(){
    for(i=0;i<3;i++){
        $('body').append('<div id="test'+i+'" data-role="page"><div data-role="header"><h2>Page'+i+'</h2></div><div data-role="content">content'+i+'</div></div>');
    }
});
</script>
</head> 

<body>  
<div data-role="page" id="mainmenu">
    <div data-role="header"><h1>Sample Home</h1></div>
    <div class="ui-body ui-body-c">
        <div data-role="content">   
            <a href="#test0" class="preShowHTML">Sample 1</a>     
            <a href="#test1" class="preShowHTML">Sample 2</a>     
            <a href="#test2" class="preShowHTML">Sample 3</a>                               
        </div>      
    </div>          
</div>

...