Auf DOM Element warten
Um zu erfahren, ob ein Element im Document Object Model (DOM) vorhanden ist, ist bei jQuery die Eigenschaft length nützlich. Der Rückgabewert ist true, wenn das Element im DOM existiert.
Um einen event handler erfolgreich an ein bestimmtes Element anzubinden, muss dieses logischerweise im DOM vorhanden sein. Wird das Element dynamisch geladen, ist dieses nicht von anfang an existent. Um nun zu verhindern, dass der event handler ins Leere läuft, ist zu prüfen, ob das Element vorhanden ist.
Die Funktion function waitForEl(selector, callback, maxTimes = false) prüft dies jede Sekunde, bis das Element gefunden wurde und die Iteration per Callback beendet wird:
@param selector (z.B. ‚#delayEl‘)
@param callback (wird aufgerufen sobald DOM Element vorhanden oder maxTimes == 0)
@param maxTimes (Anzahl maximaler Iterationen, deaktivieren: false. Achtung: Stackbomb!)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
jQuery(document).ready(function ($) { setTimeout(function () { var contentEl = '<div id="delayEl"><p>Inhalt mit Ladeverzögerung / Delay on content</p><input type="text" value="your text..."></input><span id="clear" title="clear">clear</span></div>'; $(".lazy").html(contentEl); }, 5000); function waitForEl(selector, callback, maxTimes = false) { // console output for visuel control console.log("Waiting: " + maxTimes + " seconds"); if ($(selector).length) { callback(); } else { if (maxTimes === false || maxTimes > 0) { maxTimes != false && maxTimes--; setTimeout(function () { waitForEl(selector, callback, maxTimes); }, 1000); // 1000 ms } // endif } // endif } // function waitForEl( "#delayEl", function () { // callback console.log("The element is loaded..."); $("#delayEl input").on("keyup", function () { $(".output input").val($(this).val()); }); // keyup $("#clear").on("click", function () { $('input').val(''); }); // click }, 10 // wait max. 10 times (10s) ); // waitForEl }); // ready |
Zeile 3-7: soll einen dynamisch geladenen Content simulieren, der erst nach 5 Sekunden im DOM auftaucht.
Zeile 9-22: prüft, ob Element im DOM vorhanden
Zeile 24-38: Event handler „keyup“ und „click“ werden angehängt, sobald das Element #delayEl im DOM vorhanden ist.
Das Beispiel bei Codepen zeigt zusätzlich einen zu früh angehängten event handler – bevor das Element #one im DOM überhaupt vorhanden ist. Im Gegensatz dazu, kopiert der funktionierende event handler des Elements #two das value in das unterste Input Feld.
See the Pen
Wait for Element by Erhard Sigrist (@anderenbenutzer)
on CodePen.