jquery移动页面注入答案

【问题标题】：jquery mobile page injectionjquery移动页面注入
【发布时间】：2012-06-21 05:18:10
【问题描述】：

我有这个简单的 html（我正在托管我自己的文件并且它可以工作）

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="JQM/jquery.mobile-1.0.1.min.css" />
<script src="JQM/jquery.js"></script>
<script src="JQM/jquery.mobile-1.0.1.min.js"></script>
<script src="pages.js"></script>
</head> 
<body onload="main_page();"> 

<div data-role="page">
<div data-role="header">
    <h1>My Title</h1>
</div>
<div id="main_div" data-role="content"> 
</div>
</div>

</body>
</html>

在onload我要调用这个函数，把js生成的内容添加到id="main_div"或者data-role="content"

function main_page(){//trips menu

 var this_page =' ';
 var this_body='';

 this_body += '<ul data-role="listview" data-inset="true" data-filter="true">';
 this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
 this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
 this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
 this_body += "<li><a href=\"#\">Invite friends</a></li>";
 this_body += "<li><a href=\"#\">Forum</a></li>";
 this_body += '</ul>';
 this_page += this_body;

 var $page = $( pageSelector ),
        $content = $page.children( ":jqmData(role=content)" );
    $page+=this_page;

 $.mobile.changePage(#,$page);
}

这只是我必须做的一个简单示例。但不管我做什么都行不通....

【问题讨论】：

pageSelector 来自哪里？

标签： jquery html jquery-mobile jquery-selectors onload-event

【解决方案1】：

像这样包装你的jquery

  $(document).bind('pageinit',function(){
    $("body").on("load", function(){
    // your jquery
    //
    //
    }
   });

【讨论】：

不要在 JQM 中使用 load 事件，因为它会搞砸：jquerymobile.com/demos/1.1.0/docs/api/events.html

【解决方案2】：

你不能加载这样的页面，但如果你的目标是加载这个菜单，你可以用这个 sn-p 来实现：

$(document).on('pageinit',function(){
    // this is the mobile onload event
 var this_page =' ';
 var this_body='';

 this_body += '<ul id="menu" data-role="listview" data-inset="true" data-filter="true">';
 this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
 this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
 this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
 this_body += "<li><a href=\"#\">Invite friends</a></li>";
 this_body += "<li><a href=\"#\">Forum</a></li>";
 this_body += '</ul>';
 this_page += this_body;

 $('#main_div').append($(this_page));
 //EDIT : you also need to trigger the listview creation after inserting, almost forgot this trick :P
 $('#menu').listview();

});

您可以使用该方法从您的身体中删除 onload 功能。这是你想做的吗？

【讨论】：

【解决方案3】：

对于使用 jquery 的动态附加（页面注入），附加不起作用。在这种情况下，此代码适用于我。

function main_page(){

 var this_page =' ';
 var this_body='';

 this_body += '<ul data-role="listview" data-inset="true" data-filter="true">';
 this_body += "<li><a href=\"#\">Check my Inbox</a></li>";
 this_body += "<li><a href=\"#\">Tutors/ Post Tutors</a></li>";
 this_body += "<li><a href=\"#\">Books / Post Books</a></li>";
 this_body += "<li><a href=\"#\">Invite friends</a></li>";
 this_body += "<li><a href=\"#\">Forum</a></li>";
 this_body += '</ul>';
 this_page += this_body;


     $("#atmlist").append(this_page);/*data to append*/
     $.mobile.changePage($('#index')); /*page navigation the particular where data shown*/
     $("#index").trigger("pagecreate"); /*This is like a page refresh in jquery*/
}

【讨论】：