2011-09-15 25 views
21

que tienen este código:niños jQuery un clic href no funciona

<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 matriz de la A HREF, quiero simular un HREF clic. 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é hay de malo en mi código?

Gracias, J

Respuesta

30

sillyMunky tiene razón en que su controlador de click div también se activará, creando un ciclo 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 clics y noreturn false. El uso de return false hará más de lo que necesita/intenta. Si también desea evitar la acción de clic predeterminada y detener el salto de página, también querrá 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)using Return False

+1

. Supuse que quería detener la propagación y prevenir Por defecto, la forma más eficiente de hacerlo es solo devolver falso. Además, personalmente he experimentado problemas de compatibilidad del navegador con esas dos funciones, pero nunca con el uso de return false. No estoy de acuerdo en que usar return false sea una mala práctica, alguien que decida decir que sus mejores prácticas en su blog no me cortan la mostaza. Si necesitaba la acción predeterminada pero no el borboteo, entonces la respuesta correcta habría sido usar e.stopPropagation. Prefiero mi respuesta más elegante. – sillyMunky

+0

Señalar estas cosas en el enlace y proporcionar una alternativa es una buena decisión, tal vez el OP no las haya encontrado antes. Pero creo que afirmar que hay una "mejor práctica" para esto, que es el camino más largo, no es tan útil. – sillyMunky

+1

Supone que quería eso sin decirlo explícitamente, lo que creo que es un perjuicio.Los principiantes necesitan comprender * qué * está haciendo su código y * por qué * deben escribirlo de una manera u otra. Si el OP quería 'devolver false' mientras entendía sus implicaciones, está bien. Lo que es un flaco servicio es decir "solo devuelve falso para evitar la propagación" cuando eso no es todo lo que devuelve falso lo hace y podría tener otros impactos negativos. Estoy diciendo: "Este es el código que hace lo que usted pidió, y esto es lo que realmente devuelve falso. Use con prudencia". Realmente, no es tan importante. –

15

Es suficiente para añadir return false; hasta el final del controlador de clic del ancla. El problema parece ser que el manejador de clics que se está disparando está burbujeando hacia el div que lo contiene formando un bucle infinito recursivo. Agregar el resultado falso evitará que el evento se propague (alcanzando la jerarquía a los elementos principales) y la acción predeterminada se realizará (siguiendo el enlace si se hizo clic).

Puede hacer esto usando las funciones individuales del objeto de evento (e.stopPropagation y e.preventDefault respectivamente) si lo prefiere, sin embargo, es más probable (en mi experiencia) tener problemas en sus navegadores objetivo haciendo esto que haciendo ambas cosas a la vez con la técnica 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

Cuando hago clic en el cuadro 2 o en el cuadro 3 El cuadro 1 muestra – Tech4Wilco

0

Creo que su problema radica en el hecho de que va a enlazar un evento de clic a la vez el div y el ancla (que está envuelto por el mismo div). Entonces, cuando alguien hace clic en el div o cualquier enlace dentro de él, se activarán los dos eventos de clic.

29

@ Adam Terlson tiene una buena solución si no quiere 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 anteriores HREF contestado sino más bien utilizar sin DIVs y utilizar CSS para hacer la magia. De esta manera, no es necesario seleccionar niños, padres, etc. ...

+0

Creo que esto es mucho más fácil de entender, pero tengo que cambiar demasiado código. Gracias – Tech4Wilco