xml - jQueryMobile,在新页面 div 中附加 html
问题描述
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Assignment1</title>
<!--<script type="text/javascript" src="jquery.js"></script>-->
<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
type: "GET",
url: "Assignment1.xml",
dataType: "xml",
async: true,
success:parseXML,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.status + " " + textStatus + ": " + errorThrown);
}
});
});
function parseXML(xml,textStatus,XMLHttpRequest) {
// main page
$("#mainHead").append($(xml).find('BookSite').text());
$("#mainFooter").html("<p>Name: " + $(xml).find('name').first().text() + "</p>");
$("#mainFooter").append("<p>Program: " + $(xml).find('name').attr('program') + "</p>");
$("#mainFooter").append("<p>StudentNum: " + $(xml).find('name').attr('studentNum') + "</p>");
}
$(document).on("pageshow","#p2", function() {
$("page2").append("<p>asdf</p>");
console.log("pageshow event fired");
});
$("page2").on( "pageload", function( event ) {
$("page2").append("<p>asdf</p>");
})
function pageLoad() {
$("page2").append("<p>asdf</p>");
}
$(document).on("pageinit",function(event,data) {
$("page2").append("<p>asdf</p>");
});
$(document).on("pageload",function(event,data) {
$("page2").append("<p>asdf</p>");
});
</script>
</head>
<body>
<!--current page-->
<div data-role="page" id="homePage" data-title="p1">
<div data-role="header">
<h1 id="mainHead"> </h1>
</div>
<div role="main" class="ui-content" >
<div class='ui-grid-a'>
<div class='ui-block-a' id='_out' align="center">
<a id='goP2' href="#p2">Book1</a><br><br>
</div>
<div class='ui-block-b' id='_out' align="center">
<a id='goP3' href="#p3">Book2</a><br><br>
</div>
</div>
</div>
<div role="main" class="ui-content" >
<div class='ui-grid-a'>
<div class='ui-block-a' id='_out' align="center">
<a id='goP4' href="#p4">Book3</a><br><br>
</div>
<div class='ui-block-b' id='_out' align="center">
<a id='goP5' href="#p5">Book4</a><br><br>
</div>
</div>
</div>
<!-- navbar -->
<div data-role="navbar">
<ul>
<li><a href="#p2">Book1</a></li>
<li><a href="#p3">Book2</a></li>
<li><a href="#p4">Book3</a></li>
<li><a href="#p5">Book4</a></li>
<li><a href="#homePage">HOME</a></li>
</ul>
</div>
<div data-role="footer">
<h1 id="mainFooter"></h1>
</div>
</div>
<!--page 2-->
<div data-role="page" id="p2" data-title="p2" >
<div data-role="header">
<h1>Page Two</h1>
</div>
<div role="main" class="ui-content">
<p id="page2">This is page2</p><br>
</div>
<div data-role="footer">
<h1>Footer</h1>
<a href="#" data-rel="back">back</a>
</div>
</div>
</body>
</html>
我想在第 2 页的 div 中附加一个 html 文本,但是 $(document).on("pageshow","#p2", function()) 下面的所有函数都没有附加 html 文本'asdf'。我意识到经过研究,document.ready只会适用于主页,但我想保留主页,我该如何解决这个问题?
解决方案
推荐阅读
- arm - OpenOCD:闪存 write_image 仅在闪存擦除扇区之后
- javascript - 如何对 webpack 进行故障排除“Mod
- python - Scikit LogisticRegression 中的情绪预测错误
- ios - Flutter.h 未找到错误
- redux - Redux 传奇 - 无法调度操作:__webpack_require__.i(...) 不是函数
- mysql - MySQL 需要不同的指导
- python - Python 中的 for 循环 - 如何在循环内修改 i
- sql-server - 使用返回 null 的 PARSENAME 进行分隔 - SQL Server
- excel - 根据单元格值生成单词
- php - 今天和明天的 PHP 生日通知