我在我的网站上使用PHP，jQuery，Smarty等。
我有一个表单，其中有三个输入文本字段即。 zip_code，城市和州。当用户在输入文本字段 zip_code 中输入有效的美国邮政编码时，我编写了jQuery代码来自动填充城市和州输入文本字段。
表单上的其他jQuery功能工作正常且完美但我只有这个功能的问题。我为此功能创建了一个演示页面，这个zip_code功能正常工作。但它在我的项目中没有用。
我在页面的整个HTML下方，其中包含以下格式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Name</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Example of Fixed Layout with Twitter Bootstrap version 2.0 from w3resource.com">
<meta name="author" content="">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/example-fixed-layout.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/bootstrap-modal.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/slippry.css" rel="stylesheet">
<link href="http://localhost/project_folder/user_ui_files/css/signin.css" rel="stylesheet" type="text/css">
<link href="http://localhost/project_folder/user_ui_files/css/jquery.dateLists.css" rel="stylesheet" type="text/css">
<style type="text/css">
.hideme {
opacity:0;
}
@media (max-width: 979px) {
.navbar-fixed-top.navbar-absolute {
position: absolute;
margin: 0;
}
}
.navbar-absolute + div {
margin-top: 58px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div class="navbar navbar-fixed-top navbar-absolute">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://localhost/project_folder/index.php"><img src="http://localhost/project_folder/user_ui_files/img/logo.png"/></a>
<div class="nav-collapse">
<ul class="nav pull-right navbar-fixed-bottom">
<li><a href="http://localhost/project_folder/login.php"><i class="icon-user icon-black"></i> LOGIN</a></li>
<li><a href="http://localhost/project_folder/register.php"><i class="icon-pencil icon-black"></i> REGISTER</a></li>
<li><a href="http://localhost/project_folder/chk_rebate_status.php"><i class="icon-edit icon-black"></i> REBATE STATUS</a></li>
<li><a href="http://localhost/project_folder/contact_us.php"><i class="icon-envelope icon-black"></i> CONTACT</a></li>
<li><a href="storelocations.php"><i class="icon-map-marker icon-black"></i> STORE LOCATOR</a></li>
<li>
<form action="index.php" class="navbar-form pull-right" id="formzip" method="post">
<input type="hidden" class="form-control" name="op" id="op" value="zip_code">
<input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
<input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip_code" id="zip_code" value="" > <i class="icon-zip" style="margin-top:3px;" onclick='$("#formzip").submit();'></i>
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<style type="text/css">
.list {
width:60px;
}
.dateLists_container {
}
.dateLists_container .list {
float:left;
}
.dateLists_container .day_container {
}
.dateLists_container .day_container .list {
margin-right:10px;
}
.dateLists_container .month_container {
}
.dateLists_container .month_container .list {
margin-right:10px;
}
.dateLists_container .year_container {
}
.dateLists_container .year_container .list {
}
</style>
<div class="container" style="padding-top: 140px; margin-bottom: 90px;">
<div class="row">
<div class="span12 account-container12">
<legend>New User? Register</legend>
<form action="register.php" class="form-horizontal" method="post">
<div class="row">
<input type="hidden" class="form-control" name="op" id="op" value="preview">
<input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
<input type="hidden" class="form-control" name="main_op" id="main_op" value="">
<div class="col-xs-1"></div>
</div>
<div class="span6">
<div style="float: clear;"></div>
<fieldset>
<!-- Form Name -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="First Name">First Name<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="first_name" id="first_name" value="" type="text" placeholder="Enter your first name">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Last Name">Last Name<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="last_name" id="last_name" value="" type="text" placeholder="Enter your last name">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Street 1">Address 1<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="street1" id="street1" value="" type="text" placeholder="Enter the address">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Street 2">Address 2</label>
<div class="controls">
<input name="street2" id="street2" value="" type="text" placeholder="Enter your address">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Zip">Zip<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="zip_code" id="zip_code" value="" type="text" placeholder="Enter your zip code" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="City">City<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="city" id="city" value="" readonly="readonly" type="text" placeholder="Select your city" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="State Code">State<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="state_code" id="state_code" value="" readonly="readonly" type="text" placeholder="Enter state code" class="input-medium">
</div>
</div>
</fieldset>
</div>
<div class="span5">
<fieldset>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="DOB">Date Of Birth<span style="color:#FF0000">*</span></label>
<div class="controls">
<input class="form-control date_control" type="text" name="dob" id="dob" value="">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Email Id">Email Id<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="email" id="email" value="" type="text" placeholder="Enter your mail ID">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="num">Phone No.</label>
<div class="controls">
<input name="phone_no" id="phone_no" value="" type="text" placeholder="Enter phone no." class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Password">Password<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="password" id="password" value="" type="password" placeholder="Enter the Password" class="input-medium">
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="Password">Confirm Password<span style="color:#FF0000">*</span></label>
<div class="controls">
<input name="password_confirmation" id="password_confirmation" value="" type="password" placeholder="Re-enter the password" class="input-medium">
</div>
</div>
<!-- Multiple Radios -->
<div class="control-group">
<label class="control-label" for="radios">Mode of Payment</label>
<div class="controls">
<label class="radio" for="radios-0">
<input type="radio" name="mode_of_payment" value="paypal">
PayPal
</label>
<label class="radio" for="radios-1">
<input type="radio" name="mode_of_payment" value="check">
Check
</label>
</div>
</div>
<!-- Text input-->
<div id="paypal_op" style="display:none;" class="control-group">
<label class="control-label" for="email">PayPal Email Account</label>
<div class="controls">
<input type="text" name="pay_pal_email" id="pay_pal_email" value="" placeholder="Enter email id" class="input-large">
</div>
</div>
</fieldset>
</div>
<div class="container">
<div class="row">
<div class="span2"></div>
<div class="span5">
<button type="submit" class="btn btn-success"><i class="icon-white icon-ok"></i> Preview</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div> <!-- /container -->
<footer style="background-color:#000" id="footer">
<div class="container">
<div class="row">
<div class="span3 top-buffer-footer">
<p> © 2014 PROJECT NAME</p>
</div>
<div align="center" class="span7 top-buffer-footer">
<a href="#">About Us</a> |
<a href="#">Privacy Policy</a> |
<a href="#">Terms & Conditions</a>
</div>
<div class="span2 top-buffer-footer">
<a style="float:right" href="#">Powered By COMPANY NAME</a>
</div>
</div>
</div>
</footer>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster and more quicker-->
<script src="http://localhost/project_folder/user_ui_files/js/jquery.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/slippry.min.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tooltip.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-alert.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-button.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-carousel.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-collapse.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-dropdown.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modal.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-popover.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-scrollspy.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-tab.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-transition.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-typeahead.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/bootstrap-modalmanager.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/jquery.dateLists.min.js"></script>
<script src="http://localhost/project_folder/user_ui_files/js/custom/common.js"></script>
</body>
</html>
运行此邮政编码功能的jQuery代码写入 common.js 文件，该文件包含在本页末尾。
以下是 common.js ：
文件中的代码$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i) {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > (bottom_of_object - (bottom_of_object * 0.2)) ) {
$(this).animate({'opacity':'1'},300);
}
});
});
/*jQuery code for autopo-populate city and state when customer enters valid zip code*/
$("#zip_code").keyup(function() {
var el = $(this);
if (el.val().length === 5) {
$.ajax({
url: "http://zip.elevenbasetwo.com",
cache: false,
dataType: "json",
type: "GET",
data: "zip=" + el.val(),
success: function(result, success) {
$("#city").val(result.city);
$("#state_code").val(result.state);
}
});
}
});
$('#dob').dateDropDowns({dateFormat:'mm-dd-yy'});
$("input[type='radio']").change(function() {
if($(this).val()=="paypal") {
$("#paypal_op").show();
} else {
$("#paypal_op").hide();
}
});
});
$(function() {
var demo1 = $("#demo1").slippry({
transition: 'fade',
useCSS: true,
speed: 1000,
pause: $('#brand_slider_time').val() * 1000,
auto: true,
preload: 'visible'
});
$('.stop').click(function () {
demo1.stopAuto();
});
$('.start').click(function () {
demo1.startAuto();
});
$('.prev').click(function () {
demo1.goToPrevSlide();
return false;
});
$('.next').click(function () {
demo1.goToNextSlide();
return false;
});
$('.reset').click(function () {
demo1.destroySlider();
return false;
});
$('.reload').click(function () {
demo1.reloadSlider();
return false;
});
$('.init').click(function () {
demo1 = $("#demo1").slippry();
return false;
});
});
我在我的项目中使用jQuery v1.7.1。
我还创建了一个只有这些必要字段的jsFiddle才能正常工作。你可以看到小提琴here。
在我的项目中，我尝试调试代码，试图在我为zip_code编写的函数中添加警报。 Firebug控制台都没有向我显示任何错误，也没有打印出警报。
然后我尝试在打印的zip_code函数（即页面加载）之外打印警报。警报未在函数内打印。此外，我尝试了各种其他事件，如焦点，模糊等，而不是键，然后警报也没有打印。 Firebug控制台从未向我显示任何错误或警告。
答案 0 :(得分：1)
您帖子中的标记包含两个form元素，一个位于导航菜单中，另一个位于页面的主要内容中。这两种形式都有一个id为zip_code的输入元素。
在HTML id中，属性应该是唯一的。因此，表达式$('#zip_code')将仅返回具有该id的两个元素中的第一个 - 导航菜单中的一个。这反过来导致keyup事件不被绑定到第二个（和相关的）输入字段。
它在你的小提琴中起作用的原因是小提琴中的HTML不包括导航菜单，因此标记只包含一个带有zip_code id的输入元素。