[英]JavaScript file in JQuery Mobile not working on other pages
我有一个JS文件，其中包含国家/地区列表以及这些国家/地区的州/地区。 我有1个jquery移动页面，有3个表单，我已经把代码包含在头文件中的js文件。 当我到达每个锚点时，第一个表单将由我选择，但其他两个表单不会。 发生了什么？
<?php
//allow sessions to be passed so we can see if the user is logged in
$sessionid = $_COOKIE["sessionid"];
session_id($sessionid);
session_start();
$expire=time()+60*60*24*30;
setcookie("sessionid", "$sessionid", $expire);
ob_start();
//connect to the database so we can check, edit, or insert data to our users table
$con = mysql_connect(***db info***) or die(mysql_error());
$db = mysql_select_db(***dbinfo***, $con) or die(mysql_error());
//include out functions file giving us access to the protect() function made earlier
include "./functions.php";
$userid = $_SESSION['uid'];
$lookupusername = mysql_query("SELECT * FROM users WHERE ID='$userid'");
$row = mysql_fetch_assoc($lookupusername);
$username = $row['username'];
$usercountry = $row['country'];
if ($username == ""){
header('Location: index.php');
}
?>
<!DOCTYPE html>
<html>
<head>
<script type= "text/javascript" src = "countries.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>15:11 Project Mobile</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" />
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
</head>
<body>
<!-- BEGIN PAGE 2 -->
<div data-role="page" id="submit">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<ul data-role="controlgroup">
<li><a href="#submit" data-role="button">Page Two</a></li>
<li><a href="#browse" data-role="button">Page Three</a></li>
<li><a href="#projects" data-role="button">Page Four</a></li>
<li><a href="log_out.php" data-role="button">Logout</a></li>
</ul>
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a>
<center><img src="images/logo_app_white.png" width="30px"></center>
</div>
<div data-role="content">
<tr><td>Country: </td><td><select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select></td></tr>
<tr><td>District/State: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr>
<tr><td><font color="red">*</font>City: </td><td><input type="text" name="city" /></td></tr>
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<ul>
<li><a href="#feed" class="icon-tasks icon-2x">My Feed</a></li>
<li><a href="#submit"class="icon-upload icon-2x">Submit</a></li>
<li><a href="#browse" class="icon-search icon-2x">Browse</a></li>
<li><a href="#projects" class="icon-folder-open-alt icon-2x">Projects</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<!-- END PAGE 2 -->
<!-- BEGIN PAGE org -->
<div data-role="page" id="submitorg">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<ul data-role="controlgroup">
<li><a href="#submit" data-role="button">Page Two</a></li>
<li><a href="#browse" data-role="button">Page Three</a></li>
<li><a href="#projects" data-role="button">Page Four</a></li>
<li><a href="log_out.php" data-role="button">Logout</a></li>
</ul>
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a>
<center><img src="images/logo_app_white.png" width="30px"></center>
</div>
<div data-role="content">
<tr><td>Country: </td><td><select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select></td></tr>
<tr><td>District/State: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr>
<tr><td><font color="red">*</font>City: </td><td><input type="text" name="city" /></td></tr>
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<ul>
<li><a href="#feed" class="icon-tasks icon-2x">My Feed</a></li>
<li><a href="#submit"class="icon-upload icon-2x">Submit</a></li>
<li><a href="#browse" class="icon-search icon-2x">Browse</a></li>
<li><a href="#projects" class="icon-folder-open-alt icon-2x">Projects</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<!-- END PAGE org -->
<!-- BEGIN PAGE miss -->
<div data-role="page" id="submitmiss">
<div data-role="panel" id="settingspanel" data-position="left" data-display="overlay">
<ul data-role="controlgroup">
<li><a href="#submit" data-role="button">Page Two</a></li>
<li><a href="#browse" data-role="button">Page Three</a></li>
<li><a href="#projects" data-role="button">Page Four</a></li>
<li><a href="log_out.php" data-role="button">Logout</a></li>
</ul>
</div>
<div data-role="header" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="padding-top: 5px; border-bottom: 1px solid #eccfb3; padding-bottom: 5px;">
<a href="#settingspanel" data-role="button" data-iconpos="notext" class="icon-reorder icon-2x" style="background: none; margin-left: 20px;"></a>
<center><img src="images/logo_app_white.png" width="30px"></center>
</div>
<div data-role="content">
<tr><td>Country: </td><td><select onchange="print_state('state',this.selectedIndex);" id="country" name = "country"></select></td></tr>
<tr><td>District/State: </td><td><select name ="state" id = "state"></select><script language="javascript">print_country("country");</script></td></tr>
<tr><td><font color="red">*</font>City: </td><td><input type="text" name="city" /></td></tr>
</div>
<div data-role="footer" data-position="fixed" data-theme="c" data-tap-toggle="false" data-id="foo1" style="border-top: 1px solid #eccfb3; padding-top: 5px;">
<div data-role="navbar" style="background: #ce8339;">
<ul>
<li><a href="#feed" class="icon-tasks icon-2x">My Feed</a></li>
<li><a href="#submit"class="icon-upload icon-2x">Submit</a></li>
<li><a href="#browse" class="icon-search icon-2x">Browse</a></li>
<li><a href="#projects" class="icon-folder-open-alt icon-2x">Projects</a></li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<!-- END PAGE miss -->
</body>
</html>
Countries.js
这篇文章太长了，但这里有一个下载.js的链接，并显示了用于使其工作的代码。 它再次适用于第一种形式，但不适用于其他3种形式。
http://bdhacker.wordpress.com/2009/11/21/adding-dropdown-country-state-list-dynamically-into-your-html-form-by-javascript/
您的问题是您在同一页面上多次使用相同的id属性。 id应该在给定页面中是唯一的，如果不是那么当通过id检索元素时，通常只会获得第一次出现。
至少对于您正在使用的插件，您需要传入每个选择的ID，因此您需要做的是重命名每个选择（国家和州）以使它们是唯一的，然后将相应的print_country方法更改为使用那个id
例如
<select onchange="print_state('state1',this.selectedIndex);" //note state1
id="country1" class="country" name = "country"></select>
...
<script language="javascript">print_country("country1");</script>
并为你的其他两种形式做同样的事情。
通常，同时更新多个元素的最简单方法是使用类 ，例如将国家/地区类添加到您的国家/地区select s然后使用类选择器更新它
$('.country').val('YourValue');
作为一个侧面点，您确实将所有JavaScript代码与html分开，例如，您可以在页面底部放置一个内联脚本标记，而不是一堆内联脚本标记。
<script>
$(function() {
print_country("country1");
print_country("country2");
print_country("country3");
});
</script>
使用JQuery将页面加载到div中，现有的Javascript无法正常工作
[英]Loading pages into a div with JQuery, existing Javascript not working
onClick按钮不起作用javascript / php / jquery mobile
[英]onClick button not working javascript/php/jquery mobile
jquery mobile，结合jquery mobile的“页面”和内部页面
[英]jquery mobile, combine jquery mobile “pages” and internal pages
添加我的其他 Javascript 时，Javascript/JQuery 的一部分不起作用
[英]One part of Javascript/JQuery not working when adding my other Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.