Event-Listener registrieren, bevor dazugehöriges DOM-Element vorhanden ist

  • JavaScript

Es gibt 1 Antwort in diesem Thema. Der letzte Beitrag () ist von hirnwunde.

    Event-Listener registrieren, bevor dazugehöriges DOM-Element vorhanden ist

    Hi Leute,

    folgende Gegebenheiten:

    index.html läd ein Menü, in welchem mittels <a onclick="loadMM3040()" href="">3040</a> verschieden Funktionen aus main.js aufgerufen werden.
    In main.js sehe eine solche Funktion in etwa folgendermassen aus:

    JavaScript-Quellcode

    1. function loadMM3040() {
    2. $.ajax({
    3. url: 'html/messmaske3040.html', dataType: 'html', timeout: 1000,
    4. success: function (html) {
    5. $("#mainContainer").html(html);
    6. // disableAllMessTBs();
    7. setTimeout(function() {
    8. $("#btn_mm3040_check").prop("disabled", true);
    9. $("#btn_mm3040_eintragen").prop("disabled", true);
    10. $("#tb_mm3040_tool").prop("disabled", false).focus();
    11. }, (200));
    12. }
    13. });
    14. }

    Die beiden Buttons #btn_mm3040_check, #btn_mm3040_eintragen und das Input-Element tb_mm3040_tool sind in der Datei messmaske3040.html definiert.
    Mit den timeout warte ich, bis die ganzen Elemente im DOM verfügbar sind um deren Eigenschaften zu ändern.

    Nun habe ich an anderer Stelle (in der Datei ofensachen.js) ein focusout-Event, welches aber schon registriert wird, wenn die dazugehörigen Elemente noch garnicht im DOM vorhanden sind.

    JavaScript-Quellcode

    1. $('#frmOfenbeladung').on("focusout", function(ele) { doSomething(); });

    Anfangs war es so, dass ich in der index.html alle JS-Datei lud und mittels den onclicks die jeweligen Seiten via AJAX ins DOM schrieb.
    Das dann das Event nicht triggert, ist ja recht nachvollziehbar.

    Also hatte ich die Datei nicht in der index.html geladen, sondern mittels reload_js() eine Funktion gefunden, welche nachträglich eine JS-Datei läd.

    JavaScript-Quellcode

    1. function reload_js(src) {
    2. $('script[src="' + src + '"]').remove();
    3. $('<script>').attr('src', src).appendTo('head');
    4. }

    Prinzipiell funktioniert das ganz gut.
    Nur hab ich nun das Problem, dass ich im Firefox die auf dieser Art nachgeladenen Scripte nicht debuggen kann, weil diese beim Aufruf der Seite nicht aufgerufen werden und der Debugger diese nicht beim nachladen erkennt bzw. nachläd.
    Also habe ich die Scripte weiterhin in der index.html geladen und sie nochmals mit reload_js() geladen, wenn ich mittels AJAX das/den DOM der Seite änderte.
    Das scheint allerdings auch nicht zuverlässig zu funktionieren, da es manchmal klappt und manchmal nicht.

    Event-Listener auf Elemente registrieren, die (noch) nicht vorhanden sind, klingt für mich so, als wenn das nicht funktionieren würde.

    Mir kam die Idee, die ganzen HTML-Dateien schonmal zu laden, sie aber noch nicht dem DOM hinzuzufügen.
    Dann könnte die Listener registrieren und die einzelnen HTML-Schnipsel dem DOM hinzufügen, wenn sie benötigt werden.

    Wäre das eine machbare Methode oder ist das Quatsch?

    Grüße aus Potsdam!

    Ok. Antwort selbst gefunden: api.jquery.com/delegate/

    JavaScript-Quellcode

    1. $("body").delegate( "#p1", "click", function() {
    2. doSomething();
    3. });


    Damit wird ein Listener definiert/registriert, zu dem das passende Element noch nicht im DOM vorhanden sein muss.
    Alternativ geht es auch mit ein bisschen weniger Tipperei:

    JavaScript-Quellcode

    1. $("body").on( "click" , "#p1", function() {
    2. doSomethingDifferent();
    3. });

Facebook
Telefonspende