读书人

jquery click一次触发两次?如何解决

发布时间: 2012-09-23 10:28:11 作者: rapoo

jquery click一次触发两次?怎么解决
<html>
<head>
<title>测试</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
</head>
<body>
<div>
<table border="1">
<tr>
<th>场</th>
<th>赛事</th>
<th>开赛时间</th>
<th>截止时间</th>
<th>主队</th>
<th>比分</th>
<th>客队</th>
<th>主胜</th>
<th>平局</th>
<th>客胜</th>
</tr>
<tr>
<th>002</th>
<th>英甲</th>
<th>02:45</th>
<th>截止</th>
<th>莱顿东方</th>
<th>--</th>
<th>布伦特福德</th>
<th><label class="foot"><input type="checkbox"/>3.10</label></th>
<th><label class="foot"><input type="checkbox"/>3.20</label></th>
<th><label class="foot"><input type="checkbox"/>2.05</label></th>
</tr>
<tr>
<th>003</th>
<th>巴西甲</th>
<th>08:00</th>
<th>截止</th>
<th>布塔福戈</th>
<th>--</th>
<th>巴西国际</th>
<th><label class="foot"><input type="checkbox"/>2.10</label></th>
<th><label class="foot"><input type="checkbox"/>3.10</label></th>
<th><label class="foot"><input type="checkbox"/>3.10</label></th>
</tr>
<tr>
<th>004</th>
<th>巴西甲</th>
<th>08:00</th>
<th>截止</th>
<th>格雷米奥</th>
<th>--</th>
<th>累西方航海</th>
<th><label class="foot"><input type="checkbox"/>1.83</label></th>
<th><label class="foot"><input type="checkbox"/>3.55</label></th>
<th><label class="foot"><input type="checkbox"/>3.35</label></th>
</tr>
</table>

</div>

<script type="text/javascript">
$('.foot').click(function(){
var fu=$(this).text();//-------------------------------取得到点击的赔率
//获得其父节点
var s=$(this).parent().parent().children();
var fu1 =$(this).parent().parent().children().eq(0).text();//----取到004
var fu2 = $(this).parent().parent().children().eq(4).text();//----取得到主场
var fu3 =$(this).parent().parent().children().eq(6).text();//-----取得到客场
if(s.eq(7).text()==fu){
var fu4 = $(this).parent().parent().parent().children().children().eq(7).text();
}else if(s.eq(8).text()==fu){
var fu4 = $(this).parent().parent().parent().children().children().eq(8).text();
}else{
var fu4 = $(this).parent().parent().parent().children().children().eq(9).text();
}
var a=fu1+"%"+fu2+"%"+fu3+"%"+fu4+"%"+fu+"%";
//$("#display").attr("action","4.php?data="+a);
//$("#comeon").append("<p>测试一下</p>");
$("#tr").after("<tr><th>"+fu1+"</th><th>"+fu2+"</th><th>"+fu3+"</th><th>"+fu4+"</th><th>"+fu+"</th></tr>");


var hr = $("#display").attr("href");
$("#display").attr("href",hr+a);
});
</script>

<div id="comeon">
<table border="1">
<tr id="tr">
<th>编号</th>
<th>主队</th>
<th>客队</th>
<th>投注卡</th>
<th>赔率</th>
</tr>
</table>
<a id="display" style="text-decoration:none;" href="3.php?data=">确定投注</a>
</div>
</body>
</html>


[解决办法]
呵呵,Lz这是点的label区域吧?因为label关联的checkbox也被有一个关联操作。所以,当label被点击时,默认checkbox也被点击了一次。Lz这是事件冒泡了
你有两个办法:
第一个方法:将checkbox移出label,传统的label与checkbox关联,应该是通过label的for属性的.比如:

HTML code
<input type="checkbox" id="a1"/><label class="foot" for="a1">3.35</label> 

读书人网 >JavaScript

热点推荐