首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-09-23 
jquery click一次触发两次?怎么解决htmlheadtitle测试/titlescript typetext/javascript src

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> 

热点排行