Using jQuery to change CSS of elements added into DOM

Question

I'm trying to use jQuery to change the CSS properties of jQuery Validation plugin's error labels.

This is basically because I use jQuery equations to create responsive font-size, rather than native vw or em units via CSS. Normally works beautifully.

However, because the label is not initially in the DOM, I can't target it using a $(document).ready(function): although it works on $(window).resize(function).

So what function should I be using to change elements as they are loaded into the DOM?

if they are loaded in via ajax, you could trigger the equation when the ajax call is complete. — Polyov, Aug 02 '16 at 21:38
As far as i am aware Jquery validation uses AJAX to hit the server and return a response for whether or not the data is valid. In this case you would need to include the $.ajaxComplete(function() with your code inside the block in order to target elements that have been added to the DOM, Check out the docs here: http://api.jquery.com/ajaxcomplete/ — Master Yoda, Aug 02 '16 at 21:40
if you have a jQuery function that calculates the size, you'll have to insert your elements and run that function on them... probably you'll need to refactor it so you can pass just those elements, but is better than running it on all the DOM or comparing the state of each element... also you could try something like the __[shadow DOM](http://webcomponents.org/polyfills/shadow-dom/)__ — DIEGO CARRASCAL, Aug 02 '16 at 21:50

score 1 · Answer 1 · edited May 23 '17 at 12:10

1

Well, maybe mutation observers could help? Found out about these nice things before I started using angular a few months ago, here's a post that might help

Detect changes in the DOM

--amend Watch the parent element, check if the added elements are the one's you're looking for.

edited May 23 '17 at 12:10

Community

1
1

answered Aug 02 '16 at 21:38

HES_Xenon

103
1
1
8

score 0 · Answer 2 · edited May 23 '17 at 10:34

You should use the MutationObserver API, which will trigger a listener function as soon as the DOM of the specified element changes, so you're able to make sure your elements have the right CSS without triggering resize event.

Here's some example:

$(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 );
}

Please note, however, that MutationObservers may not work in all browsers.
I based my example on this answer, which includes further code to make it work in older browsers.

score 0 · Answer 3 · answered Aug 03 '16 at 12:21

0

Thanks everybody. In the end I used something from the MutationObserver discussion that HES_Xenon links to above: a jQuery Initialise plug-in based on the MutationObserver - basically because it used less code.

answered Aug 03 '16 at 12:21

JohnG

486
3
22

Using jQuery to change CSS of elements added into DOM

3 Answers3