Die Verwendung eines Plugins wie watermark.js zum Hinzufügen des ausgegrauten Hinweistextes im Suchfeld der Jquery-Datentabelle ist keine Option, ich muss es selbst schreiben. Ich bin fast da, aber angesichts dieses kleinen und seltsamen Problems, das unten im folgenden Codeausschnitt erklärt wird.
%Vor%Diese Methode wird wie folgt aufgerufen:
%Vor%================================================== ==========================================
Das Problem, mit dem ich konfrontiert bin, ist, dass ohne die Warnung, die ich am Anfang der Methode habe, der Hinweistext nicht im Suchfeld erscheint. Hat die Warnung einige Auswirkungen auf document.ready? Rufen zwei Methoden von document.ready die Methode toggleHint auf? Eine meiner Anforderungen ist es, den Suchtext der Benutzereingabe zu erhalten, wenn er nach der Suchanfrage auf die Tabellenzeile klickt und dann auf eine benutzerdefinierte Zurück-Schaltfläche klickt, deshalb muss ich sie von document.ready aufrufen.
Bitte beraten und danke im Voraus.
«Hat die Warnung einige Auswirkungen auf document.ready?»
Sicher. Aber nicht zugunsten von document.ready, sondern zugunsten von "dynamisch geladener Tabelle data.ready".
Sehen Sie sich Ihr zweites Code-Snippet an:
Zuerst rufen Sie populateTableData () auf: Ich finde heraus, dass asynchron Daten von einem möglicherweise entfernten Server über eine Ajax-Anfrage liest.
Und dann rufen Sie toggleHintText () auf, um Ihren Toggle-Effekt über Tabellenzeilen zu implementieren. Ich stelle fest, dass einige innerhalb von populateTableData () implementierte Callbacks anhängen, sobald die Ajax-Anfrage (oder ähnliche asynchrone Operation) beendet wird.
Javascript ist single threated (was bedeutet, dass Ihr Code in einem einzigen Thread ausgeführt wird und daher frei von Nebenläufigkeit ist), aber nicht vollständig frei von Nebenläufigkeit, da asynchrone Vorgänge von anderen ausgeführt werden gleichzeitige -Threads, die auf die Ausführung der erforderlichen Operationen warten oder auf sie warten und dann (Abschlussereignis ausgelöst) eine Task in der JavaScript-Hauptaufgabenschleife (Ereignishandler, der an dieses Element angehängt ist) weiterleiten.
Der alert () -Aufruf stoppt die Ausführung von Javascript-Hauptschleifen, aber nicht gleichzeitige Threads, die an asynchronen Aufgaben teilnehmen.
Auf diese Weise kann die Ajax-Anforderungsoperation erfolgreich abgeschlossen werden (auch ohne Server-Timeoutfehler aufgrund der "Alarmpause") und das Abschlussereignis ausgelöst werden.
... Der mit diesem Ereignis verbundene Callback wird jedoch erst ausgeführt, wenn der JavaScript-Task-Loop fortgesetzt wird.
Ihre toggleHintText () - Funktion heißt SURE, bevor Ihre Tabellendaten gefüllt werden, und ohne den alert () findet der Rest des Codes KEINE Elemente in dieser Tabelle (oder zumindest keine neuen, die von populateTableData () aufgefüllt werden) ).
Es gibt also den Grund, warum Ihr Code ohne die alert () nicht funktioniert.
Aber ich bin nicht sicher, warum es auch mit der Warnung funktioniert. Ich finde heraus, dass Ihr Browser den Alarm-Stop als eine Art "paused nextTick ()" implementieren und zumindest ausstehende Event-Handler so schnell wie möglich ausführen könnte (aber ich denke, das ist in der JavaScript-Spezifikation nicht genau richtig).
>Um dieses Problem zu vermeiden, müssen Sie toggleHintText () aufrufen, wenn Sie sicher sind, dass Daten in der Tabelle eingetragen sind. Das ist:
Rufen Sie den Event-Handler auf, der die Daten für die (angenommene) Ajax-Anfrage vervollständigt.
Löse in diesem Moment dein eigenes Element aus und füge toggleHint () als Event-Handler hinzu.
Oder Sie könnten Ihre toggleHintText () -Ereignisbehandlungsroutinen so ändern, dass sie an die Tabellen selbst (oder an das gesamte Dokument) angehängt werden, anstatt an später dynamisch geladene Elemente und dann nach dem Ereignisziel zu suchen.
Das hat die veraltete .live () - jquery-Methode getan, die heutzutage einfach mit .on () und einem Zielselektor erreicht werden kann. Zum Beispiel:
In Ihrem Code:
%Vor%... letzte Zeile entspricht:
%Vor%Sie können es (zum Beispiel) durch ersetzen:
%Vor%Auf diese Weise wird der Event-Handler direkt an den Body des Dokuments und an jedes Fokusereignis angehängt. Er prüft, ob das Ziel dem angegebenen Selektor entspricht (unabhängig davon, ob das Element vor dem Event-Handler-Anhang erstellt wurde).
Zusammenfassend: Sie können den Event-Handler nicht an ein Element anhängen, das noch nicht existiert.
Auf der anderen Seite haben Sie einige Elementmanipulationen wie das Hinzufügen von Klassen und Attributen. Sie können dies nicht vor der Elementerstellung tun, aber Sie können auch einen Event-Handler an sein "creation" -Ereignis anhängen.
Aber leider existiert dieses Ereignis nicht wirklich. Aber es gibt Techniken, um es über Dom Change Event zu implementieren. Siehe diese Frage zum liveQuery-Plugin.