通过 jquery 为动态创建的 div 应用 css答案

【问题标题】：applying css through jquery for a dynamically created divs通过 jquery 为动态创建的 div 应用 css
【发布时间】：2013-05-14 19:11:13
【问题描述】：

我正在尝试使用 jquery 为动态创建的 div 添加 css 属性，并且我在文档加载时指定 jquery css 部分。但是当我稍后使用任何事件动态添加 div 时，那些具有类名的 div 将不会获得指定的属性。我在小提琴中添加了示例代码.. http://jsfiddle.net/nEgzY/9/

在小提琴中，div 会在按钮单击时附加，但你可以看到它没有获得指定的属性..

var eventsArray=["test1", "test2"];

 $(".testClick").on("click",function(){
   var printHTML='';
    for(var i=0; i<eventsArray.length; i++){
        printHTML = "<div class='eventNameTagColor"+eventsArray[i] +"'> test </div>"
   }

  $(".appendingDiv").append(printHTML);

});


    $(document).ready(
    function() {
    for(var i=0; i<eventsArray.length; i++){
        $(".eventNameTagColor"+ eventsArray[i]).css({"background" : "linear-gradient(center top , #F68A28, #F36C00) repeat scroll 0 0 transparent" ,
    "width": "250px",
    "font-weight" : "bold",
    "height" : "30px",
    "color":"#ffffff",
     "float":"left"                                    
    });
}
});

【问题讨论】：

所有不同类的 css 是否相同？
不，不是。每个人都会有所不同。我只是没有在示例中添加。仅此而已。

标签： jquery css

【解决方案1】：

问题在于您的代码，请看这里：http://jsfiddle.net/nEgzY/10/

你可以看到我已经添加了：

<div class="eventNameTagColortest1"></div>

您可以看到，如果您最初将要更改 CSS 的元素放在页面上，那么 CSS 就可以正常应用。问题是当您想要更改它的 CSS（在文档加载时）时该元素不存在 - 从外观上看，这需要在点击事件上完成。

【讨论】：

【解决方案2】：

我想你已经回答了你自己的问题：你指定的 CSS 样式只会在 Document Ready 时触发，所以只有出现在 DOM 中的元素匹配你的选择器及时会收到样式。

当通过 jQuery 添加 CSS 时，它会将其作为内联样式直接添加到目标元素。如果您之后向页面添加新元素，除非您（再次）通过 JS 专门设置它们的样式（即：将它们添加到您的 printHTML 变量中），否则它们将不会拥有它们。

【讨论】：

有没有其他办法？？因为我试图随机添加具有不同类名的 dom.. 所以每次按下按钮时我都必须继续触发 CSS。还有其他好方法吗？

【解决方案3】：

你应该连接你的字符串 printHTML，它应该是

var eventsArray=["test1", "test2"];

 $(".testClick").on("click",function(){
    var printHTML='';
    for(var i=0; i<eventsArray.length; i++){
        printHTML += "<div class='eventNameTagColor"+eventsArray[i] +"'> test </div>"
    }

   $(".appendingDiv").append(printHTML);

});

一个更好的方法是

var eventsArray=["test1", "test2"];

 $(".testClick").on("click",function(){
     $.each(eventsArray,function(i,tag){
        var dom = $("<div class='eventNameTagColor"+tag +"'> test </div>)";
        $(".appendingDiv").append(dom);
     })
 });

【讨论】：

【解决方案4】：

Here's the working demo.

您的代码存在 3 个问题：

1) 你在这里漏掉了分号printHTML = "<div class='eventNameTagColor"+eventsArray[i] +"'> test </div>"

2) 您在 $(document).ready 上将 css 应用于 $(".eventNameTagColor"+ eventsArray[i])，而在 $(".testClick").on("click",function(){ }); 上生成 dom

3) 虽然我不太擅长 CSS3 渐变，但我注意到你的渐变 css 似乎不正确。 background : linear-gradient(center top , #F68A28, #F36C00) repeat scroll 0 0 transparent;

【讨论】：