jquery champ caché non accessible jusqu'à $ (document) .ready () appelé

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

Question

( agrégées d'une autre question )

JQuery 1.3.2 code de test, exécutez dans 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>

sortie de la console: 

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

Quelqu'un peut-il offrir des liens d'explication ou de documentation pour les données de champs cachés ne pas être accessibles qu'après $ (document) .ready ()? Ce n'est pas quelque chose que j'ai jamais connu et il se révèle gênant.

Était-ce utile?

La solution

Contrairement à ce que d'autres ont écrit, votre exemple devrait fonctionner comme tous les principaux navigateurs permettent d'accéder à des éléments qui précèdent le bloc de script d'exécution. Je n'ai pas installé Firebug, mais en cas de remplacement console.log() avec document.writeln(), votre exemple fonctionne comme prévu.

Qu'est-ce qui se passe lorsque vous créez le document HTML suivant: 

<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>

Autres conseils

Eh bien, je suppose que vous avez répondu à votre propre question. En utilisant document.getElementById () a besoin de l'arborescence DOM à charger par le navigateur pour que l'API DOM (qui comprend getElementById) au travail.

Cela signifie que vous ne pouvez pas être sûr que tout appel getElementById fonctionnera correctement jusqu'à ce que le $ (document) fonction .ready est appelée. Consultez http://dean.edwards.name/weblog/2005 / 02 / d'ordre de manifestations / pour plus

document.ready lorsque la page est "prêt", ce qui signifie complètement rendu. Votre champ caché est probablement pas rendu à la page encore au moment dans le journal de démarrage.

Utilisez prêt () pour commencer à manipuler avec des éléments de page, pas avant, « il est le seul moyen d'être sûr »:)

Si je prends votre code (et ajouter jQuery ci-dessus), je reçois la même sortie. Mais si je change votre code à ce qui suit, il affichera les résultats corrects. Je pense que le code HTML de Firefox parse dans un ordre différent lorsqu'aucun html / tête / corps est donné. 

<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>

Mais, comme dit ci-dessus, attendez que le document soit prêt avant d'essayer de récupérer des éléments par ID.

Vous ne devriez pas faire confiance quoi que ce soit jusqu'à ce que le Royaume est prêt. Il est juste la façon dont les choses fonctionnent. Avez-vous un problème avec attendre jusqu'à ce prêt?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top