我有这个代码:
<html> <head> <title>site</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#wlink a').click(function() { $('.Box:visible').fadeOut('fast',function() { $('#' + (this.id).replace('link','')).fadeIn('fast'); }); $('#wlink a').removeClass('selected'); $(this).addClass('selected'); }); $('#wlink div').click(function() { var child = $(this).children(); child.click(); }); $('#linkBox1').addClass('selected'); $('#Box1').fadeIn('fast'); }); </script> </head> <style> a { outline: none; cursor: pointer; } #wrapper { border:1px solid #cccccc; border:solid 1px #ddd; width:806px; height:255px; overflow: hidden; } #wrapperBox { width:6000px; } span.text { font-size:100px; color:#aaa; } div.Box { float:left; width:805px; height:255px; background:#efefef; display: none; } #wlink div { width: 200px; text-align:center; display: block; float:left; border: solid 1px #ddd; } a.selected { background: #eee; } </style> <body> <div id="wrapper"> <div id="wrapperBox"> <div id="Box1" class="Box"> <span class="text">Box 1</span> </div> <div id="Box2" class="Box"> <span class="text">Box 2</span> </div> <div id="Box3" class="Box"> <span class="text">Box 3</span> </div> <div id="Box4" class="Box"> <span class="text">Box 4</span> </div> </div> </div> <div id="wlink"> <div><a id="linkBox1">Box 1</a></div> <div><a id="linkBox2">Box 2</a></div> <div><a id="linkBox3">Box 3</a></div> <div><a id="linkBox4">Box 4</a></div> </div> </body> </html>
现在我想做的是当A HREF的父DIV被点击时,我想模拟一个HREF点击。但它不工作,我得到这个错误:
too much recursion [Break On This Error] )});return}if(e.nodeType===3||e.nodeTy...nt=="undefined"&&(b=b.ownerDocument||
我的代码有什么问题?
谢谢,J
解决方法
sillyMunky是正确的,因为您的div点击处理程序也将被触发,创建一个无限循环,但他解决这个问题的方法不是最佳实践。你想做的是在你的点击处理程序中使用e.stopPropagation()显式地停止事件传播,而不返回false。使用return false会比您需要/打算更多。如果您还想防止默认点击操作并停止页面跳转,那么您还需要添加e.preventDefault()。
$('#wlink a').click(function(e) { e.stopPropagation(); e.preventDefault(); //not part of fixing your issue,but you may want it. $('.Box:visible').fadeOut('fast',function() { $('#' + (this.id).replace('link','')).fadeIn('fast'); }); $('#wlink a').removeClass('selected'); $(this).addClass('selected'); });
欲了解更多信息:Stop (Mis)using Return False