jQuery的孩子一个href点击不起作用

前端之家收集整理的这篇文章主要介绍了jQuery的孩子一个href点击不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个代码
<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

原文链接:https://www.f2er.com/jquery/183250.html

猜你在找的jQuery相关文章