Verwenden von jQuery zum Ändern von CSS von Elementen, die zu DOM hinzugefügt wurden

Dies ist im Grunde, weil ich jQuery-Gleichungen verwenden, um reaktive Schriftgröße, anstatt native vw oder em Einheiten über CSS zu erstellen. Normalerweise funktioniert das wunderbar.

Da das Etikett jedoch nicht im DOM enthalten ist, kann ich es nicht mit einem $(document).ready(function) Ziel verwenden: obwohl es auf $(window).resize(function) funktioniert.

Welche Funktion sollte ich verwenden, um Elemente zu ändern, wenn sie in das DOM geladen werden?

Quelle

2016-08-02 JohnG

Wenn sie über Ajax geladen werden, können Sie die Gleichung auslösen, wenn der Ajax-Aufruf abgeschlossen ist. – Polyov

Soweit ich weiß, verwendet Jquery-Validierung AJAX, um den Server zu treffen und eine Antwort darauf, ob die Daten gültig sind oder nicht. In diesem Fall müssten Sie die $ .ajaxComplete (function() - Funktion mit Ihrem Code in den Block einfügen, um auf Elemente zu verweisen, die dem DOM hinzugefügt wurden. Lesen Sie die Dokumentation hier: http://api.jquery.com/ajaxcomplete/ –

Wenn Sie eine jQuery-Funktion haben, die die Größe berechnet, müssen Sie Ihre Elemente einfügen und diese Funktion auf ihnen ausführen ... wahrscheinlich müssen Sie sie umgestalten, damit Sie nur diese Elemente übergeben können, aber es ist besser als auf dem gesamten DOM zu laufen oder den Zustand jedes Elements zu vergleichen ... auch könnten Sie etwas wie das __ [Schatten-DOM] versuchen (http://webcomponents.org/polypills/shadow-dom/) __ –

Nun, vielleicht könnten Mutationsbeobachter helfen? über diese schöne Sachen gefunden, bevor ich vor ein paar Monaten mit Winkel begonnen, hier ist ein Beitrag, der

Detect changes in the DOM

--amend Uhr das übergeordnete Element, überprüfen, ob die zusätzlichen Elemente, die Sie die eigenen sind helfen könnte Ich suche nach.

Quelle

2016-08-02 21:38:52

Sie sollten die API MutationObserver verwenden, die eine Listener-Funktion auslöst, sobald sich das DOM des angegebenen Elements ändert. So können Sie sicherstellen, dass Ihre Elemente das richtige CSS haben, ohne das Ereignis resize auszulösen.

Hier ist ein Beispiel:

$(document).ready(function() { 
    var observer = new MutationObserver(function (mutations) { 
     var elements = mutations.reduce(function (elements, mutation) { 
      return elements.concat(mutation.addedNodes); 
     }, []); 

     // .filter() makes sure you only manipulate mutated elements that match your selector 
     resizeFonts($(elements).filter(".selector")); 
    }); 
    observer.observe($(".parent-element")[ 0 ], { 
     childList: true, 
     subtree: true 
    }); 

    $(window).resize(function() { 
     resizeFonts($(".selector")); 
    }); 
}); 

function resizeFonts (elements) { 
    elements.css("font-size", amazingNewFontSize); 
}

Bitte beachten Sie jedoch, dass MutationObservers may not work in all browsers.
Ich basierte mein Beispiel auf this answer, die weiteren Code enthält, damit es in älteren Browsern funktioniert.

Quelle

2016-08-03 00:31:34 gustavohenke

Danke allen. Am Ende habe ich etwas aus der MutationObserver-Diskussion verwendet, die HES_Xenon nach oben verlinkt: ein jQuery Initialise-Plugin basierend auf dem MutationObserver - im Grunde, weil es weniger Code verwendet hat.

Quelle

2016-08-03 12:21:10 JohnG

Verwenden von jQuery zum Ändern von CSS von Elementen, die zu DOM hinzugefügt wurden

Antwort

Verwandte Themen