在index.php中，我使用href将值发送到另一个php文件;
<a href="orderinfo.php?type=11" class="ui-btn ui-shadow">order</a>
，orderinfo.php如下所示。
<html>
<head>
<script type="text/javascript">
function disableOption()
{
console.log("hello");
}
</script>
</head>
<body onload="disableOption()">
</body>
</html>
当我点击main.php中的href时。它指引我到orderinfo.php。 但函数disableOption（）不会执行，直到我自己刷新网站。 这有什么问题。
我不知道为什么。但是我不添加类型= 11.它工作正常。
<a href="orderinfo.php?" class="ui-btn ui-shadow">order</a>
尝试清除缓存。还要添加
<!-- no cache-->
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">
仍然无效。我需要手动刷新页面，控制台将显示日志信息.. 这很奇怪。我应该把整个网页放在这里。因为它太大了..
以下是整个网页。
<!DOCTYPE html>
<head>
<title>index</title>
<!--prevent from become to big on desktop-->
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<!--import the JQuery JSlib-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<!--Custom CSS-->
<style>
#ad{
text-align:center;
}
.pic{
margin-left:0;
}
.price{
}
.discount{
color:red;
}
.order{
float:left;
margin-left:40px;
}
.custom-corners .ui-bar {
margin-top:10px;
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}
.custom-corners .ui-body {
border-top-width: 0;
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}
</style>
</head>
<body>
<div data-role="page" class="page">
<div data-role="header" style="overflow:hidden;" data-position="fixed">
<h1>deal</h1>
<a href="#" data-icon="gear" class="ui-btn-right">option</a>
</div><!-- /header -->
<div role="main" class="ui-content" class="jqm-main">
<div data-role="tabs" id="tabs" class="jqm-tab">
<div data-role="navbar">
<ul>
<li><a href="#one">1</a></li>
<li><a href="#two">2</a></li>
</ul>
</div><!-- /navbar -->
<div id="one">
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>1</h3>
</div>
<div class="ui-body ui-body-a">
<img class="pic" src="img/1.jpg">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><p class="price">100</p></div>
<div class="ui-block-b"><p class="discount">80</p></div>
</fieldset>
<a href="orderinfo.php?type=11" class="ui-btn ui-shadow">order</a>
</div>
</div>
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>2</h3>
</div>
<div class="ui-body ui-body-a">
<img class="pic" src="img/2.jpg">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><p class="price">100</p></div>
<div class="ui-block-b"><p class="discount">80</p></div>
</fieldset>
<a href="orderinfo.php?type=12" class="ui-btn ui-shadow">order</a>
</div>
</div>
<div class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-a">
<h3>3</h3>
</div>
<div class="ui-body ui-body-a">
<img class="pic" src="img/3.jpg">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><p class="price">100</p></div>
<div class="ui-block-b"><p class="discount">80</p></div>
</fieldset>
<a href="orderinfo.php?type=13" class="ui-btn ui-shadow">order</a>
</div>
</div>
</div>
<div id="two">
<h3 class="ui-bar ui-bar-a ui-corner-all">1</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
<h3 class="ui-bar ui-bar-a ui-corner-all">2</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
<h3 class="ui-bar ui-bar-a ui-corner-all">3</h3>
<div class="ui-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan blandit fermentum. Pellentesque cursus mauris purus, auctor commodo mi ullamcorper nec. Donec semper mattis eros, nec condimentum ante sollicitudin quis. Etiam orci sem, porttitor ut tellus nec, blandit posuere urna. Proin a arcu non lacus pretium faucibus. Aliquam sed est porttitor, ullamcorper urna nec, vehicula lorem. Cras porttitor est lorem, non venenatis diam convallis congue.</p>
</div>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Powered by ATekNetwork</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
以下是orderinfo.php
<!DOCTYPE html>
<head>
<title>info</title>
<!--prevent from become to big on desktop-->
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<!--import the JQuery JSlib-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<!--Custom JavaScript-->
<script type="text/javascript">
function disableOption()
{
//using flag to determin the selected options
var flag;
var objToday = new Date();
//curHour = objToday.getHours() > 12 ? objToday.getHours() - 12 : (objToday.getHours() < 10 ? "0" + objToday.getHours() : objToday.getHours());
//get the time from the client device NOTICE bug: if the time from the device is wrong may cause problem.
curHour = objToday.getHours();
if(curHour < 11){
flag = 0;
console.log("hello");
}
else if(curHour >= 11 && curHour < 12){
flag = 1;
}
else if(curHour >= 12 && curHour < 13){
flag = 2;
}
else{
flag= 3;
}
console.log(curHour);
var select = document.getElementById('select-choice-1');
if(flag == 0){
for (var i=0, option; option = select.options[i]; i++)
{
option.disabled = false;
}
//emulate(select);
}
if(flag == 1){
for (var i=1, option; option = select.options[i]; i++)
{
option.disabled = false;
}
//emulate(select);
}
if(flag == 2){
for (var i=2, option; option = select.options[i]; i++)
{
option.disabled = false;
}
//emulate(select);
}
if(flag == 3){
for (var i=0, option; option = select.options[i]; i++)
{
option.disabled = true;
}
//emulate(select);
}
}
</script>
<!--Custom CSS-->
<style>
</style>
</head>
<body onload="disableOption()">
<div data-role="page" class="page">
<div data-role="header" style="overflow:hidden;" data-position="fixed">
<h1>info</h1>
<a href="#" data-icon="gear" class="ui-btn-right">option</a>
</div><!-- /header -->
<div role="main" class="ui-content" class="jqm-main">
<?php
$type = $_GET['type'];
$info = "";
if($type == 11){
$info = "1";
}
if($type == 12){
$info = "2";
}
if($type == 13){
$info = "3";
}
?>
<h3 class="ui-bar ui-bar-a ui-corner-all">info</h3>
<form action="sendmail.php" method="get">
<ul data-role="listview" data-inset="true">
<li class="ui-field-contain">
<label for="name">name</label>
<input type="text" name="name" id="name" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<div class="ui-field-contain">
<label for="textinput-disabled">type</label>
<input readonly="readonly" type="text" name="textinput-disabled" id="textinput-disabled" placeholder="Text input" value="<?php echo $info;?>">
</div>
</li>
<li class="ui-field-contain">
<label for="phone">phone</label>
<input type="text" name="phone" id="phone" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<label for="address">adress</label>
<input type="text" name="address" id="address" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<label for="slider-2">num</label>
<input type="range" name="slider-2" id="slider-2" data-mini="true" data-highlight="true" min="0" max="40" value="1" data-clear-btn="true">
</li>
<li class="ui-field-contain">
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">time</label>
<select name="select-choice-1" id="select-choice-1">
<option disabled="disabled" value="11-12">11-12</option>
<option disabled="disabled" value="12-1">12-1</option>
<option disabled="disabled" value="1-2">1-2</option>
</select>
</div>
</li>
<li class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="reset" class="ui-btn ui-corner-all ui-btn-a">reset</div>
<div class="ui-block-b"><button type="submit" class="ui-btn ui-corner-all ui-btn-a" data-ajax="false">submit</div>
<fieldset>
</li>
</ul>
</form><!--end form-->
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Powered by ATekNetwork</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
最终我发现了问题，问题是JQuery mobile中的奇怪问题。 如果你把你的脚本代码放在head元素中。它将不会加载到dom中直到web刷新。
因此我们可以将脚本放入下面的标签中。
<div data-role="page" class="page">
<script>
//your javascirpt code goes here
</script>
</div>
它有效..
答案 0 :(得分：0)
从主php中删除 jquery.mobile-1.4.3.min.js 脚本标记，然后重试。
我也面临similar problem，代码工作的唯一方法是从主页面删除上述库。
答案 1 :(得分：-1)
您应该在页面底部加载脚本，这是一种更好的做法，就像它在页面后加载一样。此外，如果您使用的是HTML5，则不再需要声明脚本类型。
<html>
<head>
</head>
<body>
<!-- your content -->
<script>
function disableOption(){
console.log("hello");
}
disableOption();
</script>
</body>
</html>