JQuery Kochbuch (German Edition)

haben Sie beim Debuggen verschiedene Möglichkeiten. Eine ist, im Debugger Schritt für Schritt vorzugehen und die Variablen und den Zustand der Seite nach jedem Schritt zu beobachten.
    In diesem Code wollen Sie die Werte von
$foo
und
$bar
prüfen, nachdem ihnen Werte zugewiesen wurden. Welchen Wert hat die Eigenschaft
.length
? Damit finden Sie heraus, wie viele DOM-Elemente selektiert wurden. Enthält jedes Objekt die DOM-Elemente, die Sie erwarten? Prüfen Sie
[0]
,
[1]
,
[2]
und so weiter, um die DOM-Elemente zu betrachten.
    Gehen wir davon aus, dass
$foo
die korrekten DOM-Elemente enthält – was geschieht, nachdem die Methode
.css()
aufgerufen wird? Mit dem CSS Inspector von Firebug finden Sie heraus, dass sich die CSS-Eigenschaft
font-size
nach dem Aufruf der Methode nicht geändert hat. Moment! Das ist
font-size
, nicht
fontsize
? Ah, da ist das Problem. Werfen Sie einen Blick in die Dokumentationen, dann stellen Sie fest, dass man eine der beiden folgenden Varianten nutzen soll:
$foo.css({ fontSize: '18px' });

$foo.css({ 'font-size': '18px' });
    Damit ist das eine Problem gelöst, aber was ist mit dem anderen? Nachdem
$bar
ein Wert zugewiesen wurde, schauen wir uns dessen Eigenschaft
.length
an und stellen fest, dass sie Null ist. Anscheinend konnten wir also keine Elemente selektieren. Ein Blick auf den HTML- und JavaScript-Code zeigt dann, dass wir den Klassennamen einfach falsch geschrieben haben.
    Jetzt können wir die beiden Korrekturen wieder in die ursprüngliche Kette einbauen:
$('.foo').css({ fontSize: '18px' }).find('.baz').show();
    Eine andere Alternative ist die Verwendung der Log-Anweisungen von Firebug:
// $('.foo').css({ fontsize: '18px' }).find('.bar').show();
var $foo = $('.foo');
console.log( $foo );
$foo.css({ fontsize: '18px' });
console.log( $foo.css('fontsize') );
var $bar = $foo.find('.bar');
console.log( $bar );
$bar.show();
    Diese Aufrufe von
console.log()
zeigen, dass in
$bar
keine selektierten Elemente stecken. Allerdings sind wir bei der Suche nach der fehlerhaften Schriftgrößen-Einstellung gleich in eine Falle gelaufen: Wir haben
fontSize
in
console.log()
auch falsch geschrieben!
    Da hilft die Kombination mehrerer Debugging-Techniken: Protokollieren von Variablen, Verwenden des Firebug-Inspectors, Lesen und nochmaliges Lesen Ihres Quellcodes – und eine weitere Person auf das Problem schauen lassen.
    Diskussion
    Die Verkettungsmöglichkeiten von jQuery helfen dabei, knappen Code zu schreiben, aber beim Debuggen kann das recht hinderlich sein, da man die einzelnen Schritte in einer Kette kaum durchlaufen und sich die Ergebnisse anzeigen lassen kann. Durch das Aufbrechen der Kette in die einzelnen Elemente – zumindest kurzfristig beim Debuggen – wird die Aufgabe leichter.

Ist das ein Bug von jQuery?
    Problem
    Sie nutzen jQuery-Code, um ein verborgenes Element anzuzeigen und dessen HTML-Inhalt nach einer Zeitverzögerung zu setzen, die Sie mit
setTimeout()
erzeugen:
function delayLog( text ) {
    setTimeout( "$('#log').show().html(text)", 1000 );
}
// Irgendwo weiter unten im Code
delayLog( 'Hello' );
    Der Aufruf von
.show()
funktioniert, aber der von
.html(text)
führt nicht zum gewünschten Ergebnis. Die Firebug-Konsole zeigt, dass die Variable
text
nicht definiert ist. Der gleiche jQuery-Code funktioniert, wenn er nicht per
setTimeout()
aufgerufen wird. Gibt es ein Problem, wenn jQuery zusammen mit
setTimeout()
genutzt wird?
    Lösung
    Eine Möglichkeit, herauszufinden, ob jQuery die Ursache des Problems ist, ist das Ersetzen Ihres jQuery-Codes durch anderen JavaScript-Code, der kein jQuery verwendet. In diesem Beispiel können wir den jQuery-Code durch ein einfaches
alert()
austauschen:
function delayLog( text ) {
    setTimeout( "alert(text)", 1000 );
}
    Wenn wir diese Version des Codes auszuprobieren, taucht das gleiche Problem auf – es gibt keinen Alert und Firebug meldet wieder, dass
text
nicht definiert ist.
    Damit haben wir das Problem zwar noch nicht gelöst, es aber deutlich eingeschränkt. Es ist ganz offensichtlich nicht jQuery (sofern nicht die reine Existenz der jQuery-Bibliothek auf Ihrer Seite zu einem Problem führt, aber das können Sie herausfinden, indem Sie den Code auf einer einfachen Testseite laufen lassen, die jQuery nicht einbindet). Also muss etwas am Code selbst falsch sein; sehr wahrscheinlich liegt das Problem beim Umgang mit
setTimeout()
.
    Das Problem ist hier tatsächlich, dass ein String-Argument, das man an
setTimeout()
übergibt, im