これら 2 つの Javascript コードのブロックがあります。基本的に私がやりたいことは、Enter ボタンと「next_layer」ボタンを同じこと「次のタスクに移動し、次の図をロードする」に使用することですが、一度クリックすると、プログラムは次のように永遠にループします。 「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 イベント
完全な 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>