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