Tec*_*lco 21 jquery children click
我有这个代码:
<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
Ada*_*son 30
sillyMunky是正确的,你的div点击处理程序也将被触发,创建一个无限循环,但他解决这个问题的方法不是最佳实践.你想要做的是e.stopPropagation()在你的点击处理程序中明确地停止事件传播而不是 return 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');
});
有关更多信息:使用Return False停止(Mis)
Boo*_*eus 29
如果您不想更改代码,@ Adam Terlson有一个很好的解决方案.这是我的解决方案:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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() {
var l = (this.id).replace('link', '');
$('.box:visible').fadeOut('fast', function() {
$('#' + l).fadeIn('fast');
});
$('#wlink a').removeClass('selected');
$(this).addClass('selected');
});
$('#linkbox1').addClass('selected');
$('#box1').fadeIn('fast');
});
</script>
</head>
<style>
a { outline: none; }
#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; }
a.linkBox { cursor: pointer; 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">
<a class="linkBox" id="linkbox1">Box 1</a>
<a class="linkBox" id="linkbox2">Box 2</a>
<a class="linkBox" id="linkbox3">Box 3</a>
<a class="linkBox" id="linkbox4">Box 4</a>
</div>
</body>
</html>
它没有调用任何先前的答案,而是使用没有DIV的HREF并使用CSS来做魔术.这样,您不必选择儿童,父母等...
sil*_*nky 15
添加return false;到锚点击处理程序的末尾就足够了.问题似乎是被触发的点击处理程序然后冒泡到包含它的div进行无限递归循环.添加返回false将阻止事件传播(将层次结构到达父元素)和正在执行的默认操作(如果单击链接,则在链接之后).
如果您愿意,可以使用事件对象的各个函数(分别为e.stopPropagation和e.preventDefault)执行此操作,但是根据我的经验,您更有可能在目标浏览器中执行此操作而不是一次执行这两项操作用这种return false;技术.
$('#wlink a').click(function() {
$('.box:visible').fadeOut('fast', function() {
$('#' + (this.id).replace('link', '')).fadeIn('fast');
});
$('#wlink a').removeClass('selected');
$(this).addClass('selected');
return false;
})