javascript onclick正在重複自我

我有這兩個Javascript代碼塊。基本上我想要做的是使用Enter按鈕和「next_layer」按鈕來做同樣的事情「去下一個任務，並加載下一個數字」，但是一旦我點擊，程序就會永遠循環，就像「onclick」總是被激活。作爲解決方案，我暫時使用：javascript onclick正在重複自我

this.bind('click');

但它只適用於第一次迭代。我該如何「解除綁定/重置」，以便它可以用於下一次迭代？還是有另一個更優雅的解決方案，不需要我使用'bind（）或unbind（）命令？

代碼塊：

$('.next_layer').click(function(){ 
var id=this.id; 
var validate=validateForm(id); 
if(validate){ 

var idns=parseInt(id)+1; 
var idcath="layer"+id; 
var idcats="layer"+idns; 
if(idns==20)$('#submitButton').css("display","block"); 

$('#'+idcath).css("visibility", "hidden"); 
$('#'+idcats).css("visibility", "visible"); 

$("html, body").animate({ scrollTop: 0 }, "slow"); 
} 

//kinda works! 
//this.bind('click'); 
return false; 
});

和：

$(document).keypress(function(event){ 
    //var stop1 = 0; 
    var keycode = (event.keyCode ? event.keyCode : event.which); 
     if(keycode == '13'){ 
     $('.next_layer').click(); 
     } 
});

[編輯]：我的問題是非常相似，這個線程： JQuery Event repeating in dynamic content

下面是完整的HTML代碼：

<div id="layer1" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url1a1}" style="margin-right: 75px; margin-left: 75px;" alt="image1_11" /></td> 
      <td><img width="360" height="360" src="${image_url1b1}" style="margin-right: 75px; margin-left: 75px;" alt="image2_11" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share1_11" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share1_11" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary1" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<div class="next_layer" id=1 >Next</div> 
</div> 

<div id="layer2" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url1a2}" style="margin-right: 75px; margin-left: 75px;" alt="image1_12" /></td> 
      <td><img width="360" height="360" src="${image_url1b2}" style="margin-right: 75px; margin-left: 75px;" alt="image2_12" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share1_12" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share1_12" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary2" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<div class="next_layer" id=2 >Next</div> 
</div> 

<div id="layer3" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url1a3}" style="margin-right: 75px; margin-left: 75px;" alt="image1_13" /></td> 
      <td><img width="360" height="360" src="${image_url1b3}" style="margin-right: 75px; margin-left: 75px;" alt="image2_13" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share1_13" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share1_13" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary3" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<div class="next_layer" id=3 >Next</div> 
</div> 

<div id="layer4" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url1a4}" style="margin-right: 75px; margin-left: 75px;" alt="image1_14" /></td> 
      <td><img width="360" height="360" src="${image_url1b4}" style="margin-right: 75px; margin-left: 75px;" alt="image2_14" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share1_14" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share1_14" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
     <tr> 
      <td><center><label style="font-size: 16px;"><b>Did Image A surprise you?</b></label>   
<input type="radio" value="Yes1a" name="seen1a_14" /><label style="font-size: 16px;">Yes</label>     
<input type="radio" value="No1a" name="seen1a_14" /><label style="font-size: 16px;">No </label></center></td> 
      <td><center><label style="font-size: 16px;"><b>Did Image B surprise you?</b></label>   
<input type="radio" value="Yes1b" name="seen1b_14" /><label style="font-size: 16px;">Yes</label>     
<input type="radio" value="No1b" name="seen1b_14" /><label style="font-size: 16px;">No</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary4" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<div class="next_layer" id=4 >Next</div> 
</div> 

<!----- 2nd pair-----> 
These pairs are analogously the same as the 1st and 5th. They were cut off due to spacing restrictions. 
<!----- 3rd pair-----> 

<!----- 4th pair-----> 

<!----- 5th pair-----> 

<div id="layer17" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url5a1}" style="margin-right: 75px; margin-left: 75px;" alt="image9_27" /></td> 
      <td><img width="360" height="360" src="${image_url5b1}" style="margin-right: 75px; margin-left: 75px;" alt="image10_27" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share5_27" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share5_27" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary17" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<div class="next_layer" id=17 >Next</div> 
</div> 


<div id="layer18" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url5a2}" style="margin-right: 75px; margin-left: 75px;" alt="image9_28" /></td> 
      <td><img width="360" height="360" src="${image_url5b2}" style="margin-right: 75px; margin-left: 75px;" alt="image10_28" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share5_28" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share5_28" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary18" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<div class="next_layer" id=18 >Next</div> 
</div> 

<div id="layer19" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url5a3}" style="margin-right: 75px; margin-left: 75px;" alt="image9_29" /></td> 
      <td><img width="360" height="360" src="${image_url5b3}" style="margin-right: 75px; margin-left: 75px;" alt="image10_29" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share5_29" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share5_29" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary19" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<div class="next_layer" id=19 >Next</div> 
</div> 

<div id="layer20" class="layers"> 
<table cellspacing="4" cellpadding="0"> 
    <tbody> 
     <tr> 
      <td><center>Image A</center></td> 
      <td><center>Image B</center></td> 
     </tr> 
     <tr> 
      <td><img width="360" height="360" src="${image_url5a4}" style="margin-right: 75px; margin-left: 75px;" alt="image9_30" /></td> 
      <td><img width="360" height="360" src="${image_url5b4}" style="margin-right: 75px; margin-left: 75px;" alt="image10_30" /></td> 
     </tr> 
     <tr> 
      <td colspan="2"><center>    <label style="font-size: 16px;">Which of these images will go Viral? Image A or Image B?</label>  </center></td> 
     </tr> 
     <tr> 
      <td><center><input type="radio" value="ImageA" name="share5_30" /><label style="font-size: 16px;">Image A</label></center></td> 
      <td><center><input type="radio" value="ImageB" name="share5_30" /><label style="font-size: 16px;">Image B</label></center></td> 
     </tr> 
     <tr> 
      <td><center><label style="font-size: 16px;"><b>Did Image A surprise you?</b></label>   
<input type="radio" value="Yes5a" name="seen5a_30" /><label style="font-size: 16px;">Yes</label>     
<input type="radio" value="No5a" name="seen5a_30" /><label style="font-size: 16px;">No </label></center></td> 
      <td><center><label style="font-size: 16px;"><b>Did Image B surprise you?</b></label>   
<input type="radio" value="Yes5b" name="seen5b_30" /><label style="font-size: 16px;">Yes</label>     
<input type="radio" value="No5b" name="seen5b_30" /><label style="font-size: 16px;">No</label></center></td> 
     </tr> 
    </tbody> 
</table> 
<hr /> 
<p>[Optional] Enter any comments here:</p> 
<p><textarea name="summary20" cols="80" rows="3"></textarea></p> 
<p><style type="text/css"> 
<!-- 
.highlight-box { border:solid 0px #98BE10; background:#FCF9CE; color:#222222; padding:4px; text-align:left; font-size: smaller;} 
--> 
</style></p> 
<!--<div class="next_layer" id=4 >Next</div>--> 
</div>

下面是完整的javascript代碼：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> 

window.onload = function() {document.getElementById('submitButton').setAttribute('onclick', 'return validateForm(20)');$('#submitButton').css("display","none");$('#submitButton').css("position","absolute");$('#submitButton').css("top","860px");} 


$('#layer1').css("visibility", "visible"); 

$('.next_layer').click(function(){ 
var id=this.id; 
var validate=validateForm(id); 
if(validate){ 

var idns=parseInt(id)+1; 
var idcath="layer"+id; 
var idcats="layer"+idns; 
if(idns==20)$('#submitButton').css("display","block"); 

$('#'+idcath).css("visibility", "hidden"); 
$('#'+idcats).css("visibility", "visible"); 

//alert("trycatch"); 
$("html, body").animate({ scrollTop: 0 }, "slow"); 
} 
//this.unbind('click') 
//else alert("nonval"); 

//kinda works! 
//this.bind('click'); 
//this.rebind('click'); 
//return false; 
}); 

$('.next_layer').keyup(function(){ 
var id=this.id; 
var validate=validateForm(id); 
if(validate){ 

var idns=parseInt(id)+1; 
var idcath="layer"+id; 
var idcats="layer"+idns; 
if(idns==20)$('#submitButton').css("display","block"); 

$('#'+idcath).css("visibility", "hidden"); 
$('#'+idcats).css("visibility", "visible"); 

//alert("trycatch"); 
$("html, body").animate({ scrollTop: 0 }, "slow"); 
} 
//this.unbind('click') 
//else alert("nonval"); 

//kinda works! 
this.bind('keyup'); 
//this.rebind('click'); 
return false; 
}); 


function validateForm(id) { 
var empty = false; 
    $(':radio').each(function() { 
     nam = $(this).attr('name'); 
nam_last=nam.substr(nam.length-2); 
if(parseInt(nam_last)==parseInt(id)+10){ 
     if (!$(':radio[name="'+nam+'"]:checked').length) { 

      empty = true; 
     } 
} 
    }); 


if (!empty) 
return true; 
else{ 
alert("Please answer all the questions!"); 
return false; 
} 
} 

$(document).keypress(function(event){ 
    //var stop1 = 0; 
    var keycode = (event.keyCode ? event.keyCode : event.which); 
     if(keycode == '13'){ 
     $('.next_layer').keyup(); 
     } 
}); 

//$(document).unbind("click", event); 

//$('#foo').bind('click', handler); 
//$('#foo').unbind('click', handler); 

</script>

來源

2013-07-04 Arturo

我發現很難看到代碼路徑會導致您提供的無限循環。你有可能在jsfiddle或jsbin中做一個測試用例嗎？ –

嗯，它會有助於說無限循環只出現在我按Enter鍵時，但不是當我直接點擊「next_layer」按鈕時？ – Arturo

如果將偵聽器更改爲''，它會發生。keyup'？ –

你實際上並沒有一個無限循環。正在發生的事情是，選擇$('.next_layer')是選擇所有元素與next_layer類，無論知名度，所以你的行

$('.next_layer').click();

有效點擊一次全部。

建議以不同方式執行此操作：
而不是顯式更改每個元素上的可見性，而是定義一對隱藏和可見的CSS類，包含適當的選項。使用removeClass和addClass切換到下一個元素

$('#'+idcath).removeClass('visible').addClass('hidden'); 
$('#'+idcats).removeClass('hidden').addClass('visible');

那麼你可以使用

$('.next_layer.visible').click();

所以你只點擊一個是可見的。

jsFiddle Example

如果由於某種原因，你不能使用CSS，你可以對元素的屬性集：

$('#'+idcath).css("visibility", "hidden").attr('active','false'); 
$('#'+idcats).css("visibility", "visible").attr('active','true');

，並單擊只是活動之一，你的按鍵處理程序將使用：

$('.next_layer[active="true"]').click();

來源

2013-07-04 02:56:07 Joe

javascript onclick正在重複自我

回答

相關問題