通过jQuery更改动态创建的元素的CSS

Question

我正在尝试更改动态创建的 .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标签的颜色？

- narulakeshav

---

你需要在创建 .card div 的 DOM 后执行此操作。 - Sunil B N

请展示您动态创建div的代码，以便我们提供帮助。 - Sunil B N

请定义"动态创建"。是从服务器加载还是在客户端创建？……？ - marsze

你的 h3 在哪里？请添加你的 HTML 模板。 - Azad

@SunilBN 我在创建 div 后更改了颜色，它也在 DOM 中显示出来。 - narulakeshav

你可以查看下面的代码片段，这是我的工作代码。 - Aruna

Answer 1

您可以在下面的createCard方法中调用cardScheme('#29ABDA');。

注意：我看不到您将动态

$cardDiv

附加到文档的位置，我的意思是附加到现有的

或中。

工作代码段：

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>

- Aruna

---

很有趣，因为之前我不需要在里面调用它，但我猜那样也可以。感谢您的帮助！ - narulakeshav

Answer 2

当DOM加载并准备好使用时，您应该添加JS代码。像这样 -

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

- Nitesh Goyal

---

如果他在客户端动态创建div，会怎么样？ - Sunil B N

他应该能够在DOM准备就绪后访问动态创建的div（不是即时创建的），对吗？ - Nitesh Goyal

OP根据问题正在动态创建。 - Sunil B N

但是当我检查元素时，它会显示在DOM中，那么它怎么可能再次动态生成呢？ - narulakeshav

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

- Sunil B N

---

你能解释一下你的答案吗？你做了什么，为什么它有效？ - empiric

Flaggers / reviewers：对于仅包含代码的答案，请进行负评而非删除！ - Scott Weldon

在注释中解释 - Sunil B N