дети 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>

теперь я хочу сделать, когда родительский DIV href щелкнут, я хочу имитировать щелчок href. Но это не работает, и я получаю эту ошибку: 

too much recursion
[Break On This Error] )});return}if(e.nodeType===3||e.nodeTy...nt=="undefined"&&(b=b.ownerDocument||

что не так с моим кодом?

Спасибо, J

21
children click jquery

4 ответов

sillyMunky прав в том, что ваш обработчик div click также будет запущен, создавая бесконечный цикл, но его подход к решению этой проблемы не является лучшей практикой. То, что вы хотите сделать, это явно остановить распространение событий с помощью 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');
});

дополнительные info:Stop (Mis)с помощью Return False

30

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

Он не вызывает ни одного из предыдущих ответов, а скорее использует HREF без DIVs и использует CSS для выполнения магии. Таким образом, вам не нужно выбирать детей, родителей и т. д...

29

достаточно добавить return false; до конца обработчика щелчка якоря. Проблема заключается в том, что запускаемый обработчик click затем пузырится до div, который содержит его, создавая бесконечный рекурсивный цикл. Добавление return 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;
 })
15

Я думаю, что ваша проблема заключается в том, что вы привязываете событие click как к div, так и к якорю (который обернут одним и тем же div). Поэтому, когда кто-то нажимает div или любую ссылку внутри него, оба события щелчка будут срабатывать.

0