Дети 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
Ответы
Ответ 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.
