通過jQuery更改動態創建元素的CSS

Question

我正在嘗試更改動態創建的div .card中h3的顏色，但是，當我重新加載頁面時，它將其值設置為默認值。

這是我正在試圖改變顏色，其中color參數是所需的顏色，以適用於h3 。

點擊按鈕，我正在創建卡片：

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

在此之后，我正在調用cardScheme方法：

cardScheme('#29ABDA');

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

我意識到JavaScript / jQuery無法找到.card類，因為這些卡是動態創建的。

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

如何更改h3的顏色？

Answer 1

你可以撥打cardScheme('#29ABDA'); 在createCard方法中，如下所示。

注意 ：我無法看到你將動態div $cardDiv附加到文檔的位置，我的意思是另一個現有的div或body 。

工作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> 

Answer 2

一旦加載DOM並准備使用，就應該添加JS代碼。 像這樣 -

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

Answer 3

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');
    });
}