在jQuery Mobile中动态添加页面不起作用 [英] Dynamically adding a page in jQuery Mobile not working

查看:82
本文介绍了在jQuery Mobile中动态添加页面不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我在jQuery Mobile中创建一个全新的页面时,将创建该页面,但是当我单击带有ID的链接链接到刚刚创建的页面时,该页面不起作用.列表项链接保持选中状态(蓝色,在标准主题中),但是页面本身未加载.

When I create a whole new page in jQuery Mobile the page gets created, but when I click the link with the id linking to the just created page, it does not work. The list item link stays selected (blue, in the standard theme), but the page itself does not load.

通过将页面附加到正文中来创建页面:

The page gets created by appending it to the body:

$('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的页面无法访问.

When I turn off jQuery Mobile you can clearly see that the page gets created, but with jQM on it cannot be accessed.

我在做什么错了?

推荐答案

以下内容对我有用...

The following worked for me...

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

这篇关于在jQuery Mobile中动态添加页面不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆