通過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

您可以撥打下面的createCard方法裏面cardScheme('#29ABDA');。

注意：我看不到你在哪裏追加動態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'); 
    }); 
}