Подтвердить что ты не робот

Дети jQuery a href 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>

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

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

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

Спасибо, J

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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