Aquí podría ser tu PUBLICIDAD


error "demasiada recursión" en JQuery 1.3.2

votos
16

Estoy tratando de hacer una forma con un comportamiento dinámico. Específicamente, tengo mis entradas en divs, y me gustaría que así sea cuando el usuario haga clic en cualquier lugar en el div, se selecciona la entrada. Estaba usando JQuery 1.2.6 y todo funcionó bien.

Sin embargo, actualicé a JQuery 1.3.2 y estoy obteniendo un comportamiento extraño. Cuando hago clic en cualquiera de las entradas, recibo un retraso antes de que se seleccione. La consola de error de Mi Firefox me da varios errores de demasiada recursividad desde la biblioteca de JQuery. Intenté la página en Internet Explorer 7 y recibí un error que decía El objeto no admite esta propiedad o método.

¿Estoy haciendo algo mal o es un error en JQuery? ¿Alguien sabe una forma de corregir este comportamiento, sin volver a la versión anterior? Estoy usando Firefox 3.0.7 en caso de que importe. Aquí hay un ejemplo simple que hice para ilustrar el problema:

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd>
<html><head>
<meta http-equiv=Content-Type content=text/html; charset=UTF-8>
<title>quiz test</title>
<script type=text/javascript src=jquery-1.3.2.min.js></script>
</head>
<body>
<div class='question'>Favorite soda?
    <div><input type='radio' name='q' value='A' id='a'><label for='a'>Coke</label></div>
    <div><input type='radio' name='q' value='B' id='b'><label for='b'>Pepsi</label></div>
    </div>
<script type=text/javascript>
$(function() {
    $(.question div).click(function() {
        $(this).children(input).click();
    });
});
</script>
</body></html>
Publicado el 12/03/2009 a las 19:19
fuente por usuario Elias Zamaria
En otros idiomas...        العربية       

10 respuestas

votos
7
$(function() {
    $(".question div").click(function() {
        var radio = $(this).children("input")[0];
        radio.checked = !radio.checked;
    });
});
Respondida el 12/03/2009 a las 07:23
fuente por usuario Ionuț G. Stan


Aquí podría ser tu PUBLICIDAD


votos
6

ya, haz clic en el evento burbujas arriba ... así que cuando levantas $(this).children("input").click(), estás levantando $(".question div").click()otra vez, y así sucesivamente.

Respondida el 12/03/2009 a las 07:26
fuente por usuario grilix

votos
4

¿Por qué necesita hacer esto si ya está usando <label for="">? Hacer clic en la etiqueta debería activar el control de radio de todos modos.

[Editar:] Siguiendo con tu comentario, puedes hacerlo de esta manera:

Haga que la etiqueta se muestre como un elemento de bloque, aplique todos los estilos que haya utilizado para el div que envuelve el campo.

.question label { display:block }

y luego usa este diseño Usted puede deshacerse si los divs también.

<label><input type="radio">Coke</label>
<label><input type="radio">Pepsi</label>
Respondida el 12/03/2009 a las 07:35
fuente por usuario Chetan Sastry

votos
3

Yo tenía el mismo problema cuando iba a hacer mi div presentar es la entrada del niño: enviar. Esto solucionará el problema:

$(function() {
    $(".question div").click(function() {
        $(this).children("input").click(function(event){
            event.stopPropagation();
        });
        $(this).children("input").trigger("click");
    });});
Respondida el 01/12/2010 a las 12:00
fuente por usuario Johan Hörnqvist

votos
3

Solo dispara click()cuando el objetivo del evento es el div, es decir,

$(function() {
    $(".question div").click(function(event) {
        if($(event.target).is('div'))
            $(this).children("input").click();
    });
});
Respondida el 12/03/2009 a las 08:05
fuente por usuario Christoph

votos
1
<script type="text/javascript">
$(function() {
    $(".question div").click(function() {
        $(this).find("input").attr("checked", "checked");
    });
});
</script>

PS: Fue recursiva demasiado probablemente porque quisiera detener la propagación de clics, no las entradas divs clics.

Respondida el 02/11/2010 a las 03:34
fuente por usuario Halil Özgür

votos
1

El problema (como dijo grilix) es que el evento "burbujea" el DOM, entonces, hay una solución fácil para eso, solo necesitas cancelar ese efecto de burbuja.

Burbuja se refiere a (inglés simple) un evento que se desencadena en TODOS los elementos que se ven afectados debido a su posición dentro del documento. Entonces, en su ejemplo, el evento "click" es recibido por (en este orden) el BODY, luego el padre (.question) DIV, luego el otro DIV y finalmente el INPUT.

Para hacer esa cancelación de burbuja, puede usar el método jQuery llamando al método stopPropagation dentro de su función de devolución de llamada, de esta manera:

$(function() {
    $(".question div").click(function(event) {
        $(this).children("input").click();
        event.stopPropagation();
    });
});

La forma simple de javascript requerirá que uses el método cancelBubble, pero supongo que está fuera del alcance de tu pregunta.

Saludos, Manolo

Respondida el 12/03/2009 a las 09:42
fuente por usuario Manoloweb

votos
0

Gracias a todos. Probé la idea de Grillix de establecer el atributo comprobado, aunque tuve que arreglar un poco la sintaxis. Aquí esta lo que hice:

$(this).children("input").attr("checked", true);

Funciona, pero todavía tengo curiosidad de por qué mi forma anterior dejó de funcionar con JQuery 1.3.2. Sé sobre los cambios en el comportamiento de propagación de eventos, pero ¿por qué no puedo solucionarlo llamando a "event.stopPropagation ()" o "return false" dentro de mi devolución de llamada?

Respondida el 12/03/2009 a las 08:11
fuente por usuario Elias Zamaria

votos
0

Sé que esta puede no ser la respuesta en absoluto, pero lo estoy escribiendo como me pasó antes: me dio un error de "demasiada recursividad" mientras estaba usando jquery y prototipo en el mismo proyecto y también puede suceder con ajax .net con jquery, así que asegúrese de que no haya conflicto entre las bibliotecas si está utilizando más de una.

Respondida el 12/03/2009 a las 07:59
fuente por usuario Amr Elgarhy

votos
0

No recuerdo cómo revisar radios con jQuery, pero podría ser así:

<script type = "text / javascript">
$ (función () {
    $ (". question div"). click (function () {
        $ (this) .children ("input"). checked (verdadero);
// o
        $ (this) .children ("input"). checked = verdadero;
    });
});
</ script>
Respondida el 12/03/2009 a las 07:47
fuente por usuario grilix


Aquí podría ser tu PUBLICIDAD