如果我在"curr_recipe"中加载一个页面,并希望通过页脚中的链接返回到#home,那么在#home页面上将不再有可用的点击事件;JQuery代码来自于m-index.php,并且我正在使用用户代理函数,因为我想在移动设备和PC /笔记本电脑等设备上使用此页面。
页面加载
$(document).ready(function () {
$("#btnSearch").click(function() {searchFiles()});
$("#testrecipe").click(function() {
$.mobile.changePage("#actRecipe");
$("#curr_recipe").load("htmltodisplay.html", function() {
$.mobile.changePage("#home", {transition: "fade"});
});
});
$("#btnReset").click(function() {resetInput()});
$("#txtRecipe").click(function() {resetInput()});
$("#toSearch").click(function() {$.mobile.changePage("#searchPage", {transition: "slide"})});
$("#allrecipes").click(function() {
$.mobile.changePage("#recipePage", {transition: "slide"});
readFiles(true);
});
});
<div data-role="page" id="home">
<div data-role="header">
<h1>Head</h1>
</div>
<div data-role="content">
<h1>What to do?</h1>
</div>
<div class="nav">
<ul style="font-size:24px;" data-role="listview">
<button id="toSearch">Rezept suchen</button>
<button id="allrecipes">Alle Rezepte</button>
<button id="testrecipe">Test Rezept</button>
</ul>
</div>
</div>
<div data-role="page" id="actRecipe">
<div id="curr_recipe" data-role="content">
</div>
<div data-role="footer" data-position="fixed" data-id="oneFooter">
<a style="font-size: 24px; width: 100%; border-radius: 0px;" href="#home" data-transition="fade">Menü</a>
</div>
</div>
页面加载
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="./jquery-2.0.0.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="./css/recipe_screen.css" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title></title>
<script>
$(document).ready(function() {
var UserAgent = navigator.userAgent.toLowerCase();
if (UserAgent.search(/(iphone|ipod|opera mini|fennec|palm|blackberry|android|symbian|series60)/) > -1) {
// mobiles Endgerät
document.getElementById("back").style.display = "none";
} else {}
});
</script>
</head>
<body>
<div id="title"></div>
<h2 class="rphone"></h2>
<div class="content">
<ul id="ingredients">
</ul>
</div>
<h2 class="rphone"> </h2>
<div class="content" id="cooking">
</div>
<div id="back">
<a id="linkback" href="/rezepteV1/index.php">Zum Menü</a>
</div>
</body>
</html>