<a href=“”> is not executing script of target html page
Question
I am using JQuery to create html pages. First.html Second.html
I have given one href link for second.html. when i click on that link, its showing the second page. Problem: 1. the script section of second.html is not executed. 2. when I see the view source of second.html, its showing me the contect of first.html
when I am directly calling the second.html its working fine, and all script code is executing properly. Please help me. I am not sure why it is happening like this.
Firstpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="js/jquery.mobile-1.1.0.js">
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header" data-position="fixed">
<h5>
Demo
</h5>
</div>
<div data-role="content" align="center">
<div>
<span id="device_used"></span><br/>
<a href="homepage.html" >
MyHCL
</a>
</div>
</div>
</div>
<script>
var device;
if( navigator.userAgent.match(/Android/i) )
device= 'Android';
else if( navigator.userAgent.match(/webOS/i) )
device= 'webOS';
else if ( navigator.userAgent.match(/iPhone/i) )
device= 'iPhone';
else if( navigator.userAgent.match(/iPad/i) )
device= 'iPad';
else if ( navigator.userAgent.match(/iPod/i) )
device= 'iPod';
else if( navigator.userAgent.match(/BlackBerry/i) )
device= 'BlackBerry';
else if( navigator.userAgent.match(/Windows/i) )
device= 'Windows';
else
device=' not detected';
document.getElementById("device_used").innerHTML=device;
// alert(navigator.userAgent);
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/);
//alert(isMobile);
</script>
</body>
</html>
Secondpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="js/jquery.mobile-1.1.0.js">
</script>
<link rel="STYLESHEET" type="text/css" href="js/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="js/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script src="js/codebase/dhtmlxcommon.js"></script>
<script src="js/codebase/dhtmlxgrid.js"></script>
<script src="js/codebase/dhtmlxgridcell.js"></script>
<script>
$(document).bind("pageinit", function() {
alert("Script executing");
$('#HR_content').hide();
$('#Carrier_content').hide();
$('#Trasaction_content').hide();
$('#Trasaction').click(function() {
$('#HR_content').hide();
$('#Carrier_content').hide();
$('#Trasaction_content').show();
});
$('#Carrier').click(function() {
$('#HR_content').hide();
$('#Trasaction_content').hide();
$('#Carrier_content').show();
});
$('#HR').click(function() {
$('#Trasaction_content').hide();
$('#Carrier_content').hide();
$('#HR_content').show();
});
var device;
if( navigator.userAgent.match(/Android/i) )
device= 'Android';
else if( navigator.userAgent.match(/webOS/i) )
device= 'webOS';
else if ( navigator.userAgent.match(/iPhone/i) )
device= 'iPhone';
else if( navigator.userAgent.match(/iPad/i) )
device= 'iPad';
else if ( navigator.userAgent.match(/iPod/i) )
device= 'iPod';
else if( navigator.userAgent.match(/BlackBerry/i) )
device= 'BlackBerry';
else if( navigator.userAgent.match(/Windows/i) )
device= 'Windows';
if(device == 'Windows')
{
$("#Android").hide();
$("#iPhone").hide();
$("#iPad").hide();
}
if(device == 'Android')
{
$("#Windows").hide();
$("#iPhone").hide();
$("#iPad").hide();
}
if(device == 'iPhone')
{
$("#Android").hide();
$("#Windows").hide();
$("#iPad").hide();
}
if(device == 'iPad')
{
$("#Android").hide();
$("#Windows").hide();
$("#iPhone").hide();
}
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Demo
</h3>
</div>
<br>
<div data-role="navbar" data-iconpos="left">
<ul>
<li id="Trasaction">
<a href="#page1" data-theme="" data-icon="" >
Trasaction
</a>
</li>
<li id="Carrier">
<a href="#page1" data-theme="" data-icon="">
Carrier
</a>
</li>
<li id="HR">
<a href="#page1" data-theme="" data-icon="">
HR
</a>
</li>
</ul>
</div>
<div data-role="content" id="Trasaction_content" >
<h3>
<div id="My_Approvals"> <a href="homepage.html" data-transition="pop">My Approvals</a></div>
</h3>
<h3>
<div id="ECS" > <a href="ECS.html" data-transition="pop">Expense Claim System</a></div>
</h3>
<h3>
<div id="Geo_LMS"><a href="homepage.html" data-transition="pop">Geo LMS</a></div>
</h3>
<h3>
<div id="TAS"> <a href="homepage.html" data-transition="pop">My Travel(TAS)</a></div>
</h3>
<h3>
<div id="Windows"> <a href="homepage.html" data-transition="pop">Windows</a></div>
</h3>
<h3>
<div id="iPad"> <a href="homepage.html" data-transition="pop">IPAD</a></div>
</h3>
<h3>
<div id="Android"> <a href="homepage.html" data-transition="pop">Android</a></div>
</h3>
<h3>
<div id="iPhone"> <a href="homepage.html" data-transition="pop">iPhone</a></div>
</h3>
</div>
<div data-role="content" id="Carrier_content">
<h3>
<a href="homepage.html" data-transition="pop">Appraisal Review(i4Excel)</a>
</h3>
<h3>
<a href="homepage.html" data-transition="pop"> My Profile (ESS)</a>
</h3>
<h3>
<a href="homepage.html" data-transition="pop"> Performance Appraisal (I4EXCEL)</a>
</h3>
<h3>
<a href="homepage.html" data-transition="pop">My Skill Profile (SPS)</a>
</h3>
</div>
<div data-role="content" id="HR_content">
<h3>
<a href="homepage.html" data-transition="pop">Payroll Input System</a>
</h3>
<h3>
<a href="homepage.html" data-transition="pop">Smart Recruit</a>
</h3>
<h3>
<a href="homepage.html" data-transition="pop"> Transfer Management System</a>
</h3>
<h3>
<a href="homepage.html" data-transition="pop"> Vehicle Declaration</a>
</h3>
</div>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2012-05-16 10:51:57
if you are using jQuery mobile you should not use $(document).ready() use $(document).bind('pageinit') instead.
$(document).raedy() event is fired only once when the first page is loaded. Any subsequent pages are loaded using AJAX calls, hence no document.ready event.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
script not executing for appended data but executing for prewritten html code inside form, also script is already loaded in top of page
Script not executing on page load
My html script has a LOT of href urls and is causing my page to slow down, how to solve this issue?
embedded jquery script not executing with html
href doesn't load html's script
execute script on the page that will open by clicking href javascript
How to scrollIntoView target id element of href to center of page using jQuery
jquery multiple links text replacement from id in target href page
After clicking a href link, generate click event in the target page
href HTML call to page “UP” Directory
Related Tags