Change CSS of dynamically created elements via jQuery

Question

I'm trying to change the color of the h3 within my div .card that was dynamically created, however, when I reload the page, it sets its values to default.

This is how I'm trying to change the color where color in parameter is the desired color to apply to the h3.

On button click, I'm creating the card:

function createCard(id, title, ...) {
    // Creates a main card div
    var $cardDiv = $('<div>', {
        class: 'col-md-12 card',
        "card-id": id
    });

    // h3 tag with title of note
    var $title = $('<h3>', {
        "data-toggle": 'modal',
        "data-target": '#update',
        click: function() {
            updateModal(id, title, note);
        }
    }).text(title);

    // Append to card
    $cardDiv.append($title);
}

After this, I'm calling the cardScheme method:

cardScheme('#29ABDA');

function cardScheme(color) {
    $('.card h3').css('color', color);
}

I realized that JavaScript/jQuery are unable to find the .card class since those cards were created dynamically.

var cards = document.getElementsByClassName('card');
for (var i in cards) {
    console.log('cards', cards[i]);
}
// returned {cards, 0}

How can I change the color of the h3?

you need to do this after the creation of DOM of div .card — Sunil B N
– Sunil B N, Commented Nov 17, 2016 at 7:22
so show where you are creating the divs dynamically, so that we can help — Sunil B N
– Sunil B N, Commented Nov 17, 2016 at 7:23
Define "dynamically created". Loaded from server? Created on clientside? ...? — marsze
– marsze, Commented Nov 17, 2016 at 7:23
@SunilBN I am changing the color after the creation of the div and it shows up in the DOM as well. — narulakeshav
– narulakeshav, Commented Nov 17, 2016 at 7:29

Aruna · Accepted Answer · 2016-11-17 07:36:09Z

You can call the cardScheme('#29ABDA'); inside the createCard method as below.

Note: I can't see where you are appending the dynamic div $cardDiv to the document, I mean to another existing div or body.

Working snippet:

function cardScheme(color) {
    $('.card h3').css('color', color);
}

function createCard(id, title, note) {
        
    // Creates a main card div
        var $cardDiv = $('<div>', {
            class: 'col-md-12 card',
            "card-id": id
        });
    
        // h3 tag with title of note
        var $title = $('<h3>', {
            "data-toggle": 'modal',
            "data-target": '#update',
            click: function() {
                updateModal(id, title, note);
            }
        }).text(title);
    
        // Append to card
        $cardDiv.append($title);
  
        $('#container').append($cardDiv);
    
        cardScheme('#29ABDA');
}

setTimeout(function(){
  createCard('test', 'testTitle', 'test note');
}, 2000);  // after 2 seconds

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

Interesting because I didn't have to call it inside that previously, but I guess that works. Thanks for the help!

Nitesh Goyal · Accepted Answer · 2016-11-17 07:24:45Z

0

You should add your JS code once the DOM is being loaded and ready to use. Like this -

$(document).ready(function(){
    $('.card h3').css('color', color);
});

answered Nov 17, 2016 at 7:24

Nitesh Goyal

5775 silver badges11 bronze badges

4 Comments

Sunil B N Over a year ago

what if he is creating div dynamically in client side

Nitesh Goyal Over a year ago

Still he should be able to access the dynamically created divs (Not on the fly created) once the DOM is ready. Right?

Sunil B N Over a year ago

OP is creating on the fly as per question.

narulakeshav Over a year ago

But it shows up in the DOM when I inspect elements so how would that be on fly again?

Sunil B N · Accepted Answer · 2016-11-18 02:31:39Z

0

function createCard(id, title, ...) {
      ...
     // append this below the initial code you've
    //.ready make sures that function within is executed only when the specified HTML element is created in DOM
    $($title).ready(function(){
         //Then call your function
        cardScheme('#29ABDA');
    });
}

edited Nov 18, 2016 at 2:31

answered Nov 17, 2016 at 7:30

Sunil B N

4,2251 gold badge33 silver badges53 bronze badges

3 Comments

empiric Over a year ago

Can you explain your answer? What have you done and why is it working?

Scott Weldon Over a year ago

Flaggers / reviewers: For code-only answers such as this one, downvote, don't delete!

Sunil B N Over a year ago

Explained in comments

Collectives™ on Stack Overflow

Change CSS of dynamically created elements via jQuery

3 Answers 3

1 Comment

4 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

3 Comments

Related