我有一个大问题，我试图围绕one page template system建立一个网站，所以听说它是如何工作的。。。。。用户单击链接：<a href="#" id="<? md5('....').'-link-stay' ?>">.....</a>，但问题是，我在一个附加到侦听器的页面上有100多个php生成的链接，出于某种奇怪的原因，每次单击链接，用户返回主页时，请求都会翻倍。。。。换句话说：用户点击链接。。。。转到页面。。。。。他看到了大量的链接。。。。用户单击链接。。。。。转到一页。但是如果用户返回，ajax调用会加倍？？？？例如1个帖子。。。2个职位。。。。。4个帖子。。。。8个帖子。。。。。16个职位。。。。。32个帖子。。。。。。64个帖子。。。。。我正在尝试使用chrome进行调试，它显示了每次调用network(HTTP Request)时向其发送的帖子数量，并显示了正在发送的帖子及其加倍
Html标记：
<script>
// main menu
$('header a').addClass('lvl1Links');
// classifeds
$('#9090 a').addClass('lvl1Links');
//states - citys - cats ads
$('#selectable a').addClass('lvl1Links');
// re-install link management
$(function(){
$('.lvl1Links').click(function(event) {
event.preventDefault();
$('pload').html('<img src="source/image/lbl.gif">');
var page = $(this).attr('id');
var huh = $('input:hidden').val();
var data = 'pop='+huh+'&page='+page;
$.post('source/php/bots/authorize.php',data,function(data){
$('#pager_master_div').html(data).slideDown();
$('pload').html('');
});
});
});
// speacial style on certain input boxes
$('input').addClass('input');
$('#op').removeClass('input');
$('#sp').removeClass('input');
$('button').button();
//$("#BUser_Home_Wrapper a .lvl1Links").removeClass("lvl1Links");
</script><div id="9090"><ol id="selectable"><li class="ui-state-default">
<div class="contr"><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alabama:1">Alabama</a></div><div class="citys"><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alabama:1.Birmingham:1">Birmingham</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alabama:1.Montgomery:2">Montgomery</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alabama:1.Mobile:3">Mobile</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alabama:1.Huntsville:4">Huntsville</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alabama:1.Tuscaloosa:5">Tuscaloosa</a><br><li class="ui-state-default">
<div class="contr"><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alaska:2">Alaska</a></div><div class="citys"><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alaska:2.Anchorage:6">Anchorage</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alaska:2.Juneau:7">Juneau</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alaska:2.Fairbanks:8">Fairbanks</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alaska:2.Sitka:9">Sitka</a><br><a href="#" id="d1457b72c3fb323a2671125aef3eab5d.class.Alaska:2.Ketchikan:10">Ketchikan</a><br></ol></div><style>
.contr{
}
.citys{
display:none;
position:absolute;
height:110px;
width:100px;
top:30px;
left:-5%;
right:-5%;
z-index:100;
background:#FFF;
border-radius:5px;
border:5px #0099FF solid;
font-size:10px;
}
.cityz{
display:none;
position:absolute;
height:200;
width:100px;
top:-100px;
left:-5%;
right:-5%;
z-index:100;
background:#FFF;
border-radius:5px;
border:5px #0099FF solid;
font-size:10px;
}
.citys a{
font-size:15px;
}
.cityz a{
font-size:15px;
}
#selectable li a{
font-size:14px;
}
#selectable li city a{
}
#selectable {
list-style-type: none; margin: 0; padding: 0;
}
#selectable li {
margin:5px;
position:relative;
border-radius:10px;
padding: 1px;
float:left;
width: 100px;
height: 25px;
text-align: center;
}
</style>
<script>
$('.ui-state-default').mouseenter(function(e) {
$('.citys', this).slideDown(); // added this
}).mouseleave(function(e) {
$('.citys', this).toggle(); // added this
});
// bttom rows
$('.ui-state-default').mouseenter(function(e) {
$('.cityz', this).slideDown(); // added this
}).mouseleave(function(e) {
$('.cityz', this).toggle(); // added this
});
</script>
<results></results><input type="hidden" id="fortknox" name="fortknox" value="c4ca4238a0b923820dcc509a6f75849b"><results></results><input type="hidden" id="fortknox" name="fortknox" value="c4ca4238a0b923820dcc509a6f75849b">
<script>
$('input').addClass('input');
$('button').button();
// click event for all links
$(function(){
$('.lvl1Links').click(function(event) {
event.preventDefault();
$('pload').html('<img src="source/image/lbl.gif">');
var page = $(this).attr('id');
var huh = $('input:hidden').val();
var data = 'pop='+huh+'&page='+page;
$.post('source/php/bots/authorize.php',data,function(data){
$('#pager_master_div').html(data).slideDown();
$('pload').html('');
});
});
});
</script>
php代码：
<?
case 'class':
require('functions/cats.php');
classie($p);
break;
function classie($p){
connect();
$state = explode(':',$p[2]);
$total = count($state);
$s = md5('?').'.class.';
$sid = $state[1];
$state = $state[0];
echo "<a href='"#'" id='"$s$state:$sid'">$state</a>";
echo "<ol id='"selectable'">";
if(isset($p[3])){
$city = explode(':',$p[3]);
$cid = $city[1];
$city = $city[0];
echo " : <a href='"#'" id='"$s$state:$sid.$city:$cid'">$city</a>";
$sqlca = mysql_query("SELECT * FROM `cats` WHERE `cityId`= ".$cid." ");
while($rowsy = mysql_fetch_array($sqlca)){
echo " : <a href='"#'" id='"$s$state:$sid.".$city.":".$cid.".".$rowsy['name'].":".$rowsy['id']."'">".$rowsy['name']."</a>";
}
}
?>
您可以使用取消绑定单击来解决问题，以防止双击并导致多条目。看看我对JS代码的修订如下：
$(function(){
$('.lvl1Links').bind(''click,function(event) {
event.preventDefault();
$('pload').html('<img src="source/image/lbl.gif">');
var page = $(this).attr('id');
var huh = $('input:hidden').val();
var data = 'pop='+huh+'&page='+page;
$.post('source/php/bots/authorize.php',data,function(data){
$('#pager_master_div').html(data).slideDown();
$('pload').html('');
});
$(this).unbind(event);
});
});