Menu
if I load a page into "curr_recipe" and want to go back with the link in the footer to #home no click events are available anymore on the page #home; the jquery code comes from m-index.php and i'm using the user agent function, because I want this page on mobile devices and pc's/laptops etc.
$(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>
the page to load
<!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>
580
Edit:
have you check jquery on()? http://api.jquery.com/on/
Let suppose the event cannot be fired because the element doesn't exist at the time. Using on() you could wait for it so it could be fired at any moment no matter what.
89
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
