JQuery дети, щелчок href не работает - PullRequest
Новая
       3

JQuery дети, щелчок href не работает

21 голосов
/ 15 сентября 2011

У меня есть этот код: 

<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 A HREF я хотел имитировать щелчок HREF. Но это не работает, и я получаю эту ошибку: 

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

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

Спасибо, J

Ответы [ 4 ]

30 голосов
/ 15 сентября 2011

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');
});

Для получения дополнительной информации: Остановить (Mis) с помощью Return False

29 голосов
/ 16 сентября 2011

@ У Адама Терлсона есть хорошее решение, если вы не хотите менять свой код.Вот мое решение: 

<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 без DIV и использует CSS, чтобы творить чудеса.Таким образом, вам не нужно выбирать детей, родителей и т.д. ...

15 голосов
/ 15 сентября 2011

Достаточно добавить 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;
 })
0 голосов
/ 15 сентября 2011

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

...