jquery verstecktes Feld nicht zugänglich, bis $ (document) .ready() aufgerufen

JQuery 1.3.2 Testcode, laufen in 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>

Console Ausgabe:

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

Kann jemand Erklärungen oder Dokumentationsverknüpfungen für versteckte Felder anbieten, die erst nach $ (document) .ready() zugänglich sind? Es ist nicht etwas, was ich je erlebt habe und es erweist sich als lästig.

Quelle

2009-06-15 Andy

Es ist fast klingt wie Sie sind gefragt, –

eh? Haben Sie nicht versucht, direkt nach der Deklaration auf ein DOM-Element im Skript zuzugreifen? Normalerweise feines Futter. – Andy

Ich versuche, fast alle meine Skripte in externen Dateien zu behalten, damit sie vom Browser zwischengespeichert werden können, wenn der Rest meines Seiteninhalts dynamisch generiert wird. Also nein, ich habe nicht versucht, vor dem dom-ready-Ereignis auf ein DOM-Element aus dem Skript zuzugreifen, und ich denke nicht, dass es eine sehr gute Idee ist, dies zu tun. –

Im Gegensatz zu dem, was andere geschrieben haben, sollte Ihr Beispiel arbeiten, da alle gängigen Browser Zugriff auf Elemente ermöglichen, die das auszuführende Skriptblock vorangestellt werden. Ich habe Firebug nicht installiert, aber wenn Sie console.log() durch document.writeln() ersetzen, funktioniert Ihr Beispiel wie erwartet.

Was passiert, wenn Sie das folgende HTML-Dokument zu erstellen: „Warum nicht bereit das Dokument, bevor es fertig ist“

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

Quelle

2009-06-15 17:37:24 Christoph

Christoph, danke für deine Antwort und dein Arbeitsbeispiel. Im Zusammenhang mit der Antwort von miguelle (Hinzufügen von und Tags) scheint es, dass die Konsole von Firebug einen Fehler hat, der sich auf console.log oder das Parsen versteckter Elemente bezieht, die nicht in gültigem HTML deklariert sind. – Andy

Sie sollten nichts vertrauen, bis das dom bereit ist. Es ist nur so, wie die Dinge funktionieren. Hast du ein Problem damit zu warten?

Quelle

2009-06-15 17:27:12 Ballsacian1

Ja, das heißt ein Ajax-Aufruf (zum Einfügen in/Aktualisieren eines DOM „Platzhalter“ Element) vor dem DOM gefeuert beendet Laden – Andy

Nun, ich denke, Sie Ihre eigene Frage beantwortet. Bei Verwendung von document.getElementById() muss die DOM-Struktur vom Browser geladen werden, damit die DOM-API (die getElementById enthält) funktioniert.

Das bedeutet, dass Sie nicht sicher sein können, dass jeder getElementByld Anruf richtig, bis die $ arbeiten (document) .ready Funktion aufgerufen wird. Check out http://dean.edwards.name/weblog/2005/02/order-of-events/ für mehr

Quelle

2009-06-15 17:27:58

'getElementById()' sollte für alle Elemente arbeiten, um das Skript – Christoph

vorhergehenden Warum diese Antwort modded wurde auf? Es ist falsch und verweist auf einen 4 Jahre alten Artikel, wahrscheinlich für eine andere JS-Version. Christoph ist richtig - Elemente "deklariert" oberhalb der

Wenn ich nehme Ihren Code (und fügen Sie jQuery oben) ich die gleiche Ausgabe erhalten . Aber wenn ich den folgenden Code ändere, werden die korrekten Ergebnisse ausgegeben. Meine Vermutung ist, dass Firefox den HTML-Code in einer anderen Reihenfolge analysiert, wenn kein html/head/body angegeben ist.

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

Warten Sie jedoch, bis das Dokument bereit ist, bevor Sie versuchen, Elemente anhand der ID abzurufen.

Quelle

2009-06-15 17:37:23 miguelle

Dank miguelle, this ist in der Tat richtig! Wie spekuliert, scheint es, dass die Konsole von Firebug einen Fehler hat, der sich entweder auf console.log oder das Parsen versteckter Elemente bezieht, die nicht in gültigem HTML deklariert sind. – Andy

jquery verstecktes Feld nicht zugänglich, bis $ (document) .ready() aufgerufen

Antwort

Verwandte Themen