javascript onclick在重复本身

Question

I have these two block of Javascript codes. Essentially what I want to do is use the Enter button and the "next_layer" button for the same thing "go to the next task, and load the next figures", but once I Click, the program loops over itself forever, like if the "onclick" was always activated. As a solution, I temporarily used:

this.bind('click');

but it only works for the first iteration. How do I 'unbind/reset' this so it works for the next iterations as well? Or is there another more elegant solution that doesn't require me to use the 'bind() or unbind() commands?

Code blocks:

$('.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;
});

and:

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

[EDIT]: My problem is very similar to this thread: JQuery Event repeating in dynamic content

Here is the complete HTML code:

<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>

Here is the complete javascript code:

<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>

Answer 1

You do not actually have an infinite loop. What is happening is that the selector $('.next_layer') is selecting all elements with the next_layer class, regardless of visibility, so your line

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

effectively clicks them all at once.

A suggestion to do this differently:
Instead of explicitly changing visiblity on each element, define a couple of CSS classes like hidden and visible that contain the appropriate options. Use removeClass and addClass to change to the next element

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

Then you could use

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

so you only click the one that is visible.

jsFiddle Example

If for some reason you can't use CSS, you could set an attribute on the elements:

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

and to click just the active one, your keypress handler would use:

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