jQuery campo oculto no es accesible hasta $ (document) ready () llama

StackOverflow https://stackoverflow.com/questions/997296

Pregunta

( agregado de otra pregunta )

jQuery 1.3.2 código de prueba, ejecute en FF3: 

<input type="hidden" value="236434" id="ixd" name='ixd' />

<script>
console.log( $('#ixd').val() );

console.log( $('#ixd') );
console.log( $("input[name='ixd']") );
console.log( $("input:hidden") );

console.log( $("input[name='ixd'][type='hidden']") );
console.log( $("input[name='ixd']").val() );

$(document).ready(function() {
    console.log( $('#ixd').val() );
    console.log( $('#ixd') );
    console.log( $("input[name='ixd']") );
    console.log( $("input:hidden") );
});
</script>

salida de la consola: 

undefined
[]
[]
[]
[]
undefined
236434
[input#ixd 236434]
[input#ixd 236434]
[input#ixd 236434]

¿Alguien puede ofrecer ninguna explicación o enlaces de documentación para los datos de los campos ocultos, no siendo accesibles hasta después $ ready (documento) ()? No es algo que he experimentado y que está resultando problemático.

¿Fue útil?

Solución

Al contrario de lo que otros han escrito, su ejemplo debería trabajar como todos los principales navegadores permiten el acceso a los elementos que preceden al bloque de script de ejecución. No tengo instalado Firebug, pero cuando se reemplaza con console.log() document.writeln(), el ejemplo funciona como se esperaba.

¿Qué sucede cuando se crea el siguiente documento HTML: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<input type="hidden" value="236434" id="ixd">
<pre><script type="text/javascript">
document.writeln($('#ixd').val());
document.writeln(document.getElementById('ixd').value);
</script></pre>

Otros consejos

Bueno, supongo que responde a su propia pregunta. Utilizando document.getElementById () necesita el árbol DOM para ser cargado por el navegador para que el API DOM (que incluye getElemenById) para trabajar.

Esto significa que no se puede estar seguro de que cualquier llamada getElemenById funcionará correctamente hasta que la función ready $ (document) se llama. Echa un vistazo a http://dean.edwards.name/weblog/2005 / 02 / fin-de-eventos / para más

document.ready cuando la página está "listo", significará plena prestados. Su campo oculto, probablemente, no se representa en la página sin embargo, en el momento en el registro de inicio.

El uso listo () para iniciar la manipulación con elementos de la página, no antes de eso, "es la única manera de estar seguro":)

Si tomo su código (y añadir jQuery arriba) me da la misma salida. Pero si cambio de su código a la siguiente, se dará salida a los resultados correctos. Mi conjetura es que Firefox analiza el código HTML en un orden diferente cuando no se da ninguna html / cabeza / cuerpo. 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
</head>
<body>
<input type="hidden" value="236434" id="ixd" name='ixd' />

<script>
console.log( $('#ixd').val() );

console.log( $('#ixd') );
console.log( $("input[name='ixd']") );
console.log( $("input:hidden") );

console.log( $("input[name='ixd'][type='hidden']") );
console.log( $("input[name='ixd']").val() );

$(document).ready(function() {
    console.log( $('#ixd').val() );
    console.log( $('#ixd') );
    console.log( $("input[name='ixd']") );
    console.log( $("input:hidden") );
});
</script>

</body>
</html>

Pero, como se dijo anteriormente, esperar a que el documento que estar listo antes de tratar de recuperar los elementos de identificación.

Usted no debe confiar en nada hasta que el DOM está listo. Es sólo la forma en que las cosas funcionen. ¿Tiene un problema con esperar hasta listo?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top