read - jQuery children a href click no funciona
json jquery tutorial (4)
Tengo este codigo
<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>
Ahora, lo que quiero hacer es cuando se hace clic en el DIV principal de A HREF, quiero simular un clic HREF. Pero no funciona, y me sale este error:
too much recursion
[Break On This Error] )});return}if(e.nodeType===3||e.nodeTy...nt=="undefined"&&(b=b.ownerDocument||
¿Qué está mal con mi código?
Gracias j
@Adam Terlson tiene una buena solución si no desea cambiar su código. Aquí está mi solución:
<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>
No invoca ninguna de las respuestas anteriores, sino que usa HREF sin DIV y usa CSS para hacer la magia. De esta manera, no tienes que seleccionar niños, padres, etc.
Basta con añadir return false; hasta el final del controlador de clic del ancla. El problema parece ser que el controlador de clics que se está disparando está burbujeando hasta el div que lo contiene haciendo un bucle recursivo infinito. Agregar el retorno falso evitará la propagación del evento (que llega a la jerarquía a los elementos principales) y la acción predeterminada que se realiza (siguiendo el enlace si se hizo clic).
Puede hacer esto utilizando las funciones individuales del objeto de evento (e.stopPropagation y e.preventDefault respectivamente) si lo prefiere, sin embargo, es más probable (según mi experiencia) que tenga problemas en sus navegadores de destino haciendo esto que haciendo ambas cosas a la vez. con el return false; técnica.
$(''#wlink a'').click(function() {
$(''.box:visible'').fadeOut(''fast'', function() {
$(''#'' + (this.id).replace(''link'', '''')).fadeIn(''fast'');
});
$(''#wlink a'').removeClass(''selected'');
$(this).addClass(''selected'');
return false;
})
Creo que su problema radica en el hecho de que está vinculando un evento de clic al div y al ancla (que está envuelto por el mismo div). Entonces, cuando alguien haga clic en el div o en cualquier enlace dentro de él, se activarán ambos eventos de clic.
sillyMunky tiene razón en que su controlador de clic div también se activará, creando un bucle infinito, pero su enfoque para resolver este problema no es la mejor práctica. Lo que quiere hacer es detener explícitamente la propagación de eventos con e.stopPropagation() en su controlador de clic y no return false . Usar return false hará más de lo que necesita / pretende. Si también desea evitar la acción de clic predeterminada y detener el salto de página, también deseará agregar 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'');
});
Para más información: Stop (Mis) usando Return False