javascript - javascript onclick 正在重演

Question

我有这两个 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 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>

Answer 1

您实际上并没有无限循环。发生的事情是选择器$('.next_layer')正在选择所有具有 next_layer 类的元素，无论可见性如何，所以你的行

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

一次有效地点击它们。

建议以不同的方式执行此操作：
不要显式更改每个元素的可见性，而是定义几个 CSS 类，例如 hidden 和 visible ，其中包含适当的选项。使用removeClassandaddClass切换到下一个元素

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

然后你可以使用

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

所以你只点击可见的那个。

jsFiddle 示例

如果由于某种原因你不能使用 CSS，你可以在元素上设置一个属性：

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

并单击活动的，您的按键处理程序将使用：

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