通过jQuery应用css动态创建的div

我想添加CSS动态创建的div使用jquery的属性，我指定jquery css部分在文档加载时。但是当我以后使用任何事件动态添加div时，那些具有类名称的div将不会获取指定的属性。伊夫加入小提琴的样本代码.. http://jsfiddle.net/nEgzY/9/通过jQuery应用css动态创建的div

的小提琴，在div被附加上按一下按钮，BTü可以看到它没有得到指定的属性..

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

来源

2013-05-14 sam

对于所有不同的类，css是否一样？ – 2013-05-14 10:34:17

没有它没有..它会为每个人不同..我只是没有在示例中添加..多数民众赞成在所有。 – sam 2013-05-14 10:35:58

的问题是与您的代码，看看这里：http://jsfiddle.net/nEgzY/10/

你可以看到我已经添加：

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

你可以看到，如果你把日e元素你最初改变页面上的CSS，然后CSS应用很好。问题在于当你想要改变它的CSS（在文档加载时）时，该元素不存在 - 这需要在click事件上完成，通过外观来完成。

来源

2013-05-14 10:38:54

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

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

来源

2013-05-14 10:40:11 johnkavanagh

有什么办法吗？因为我试图随意添加不同类名的doms ..所以我将不得不继续每次按下按钮时触发CSS。有没有其他的方法可以做到这一点？ – sam 2013-05-14 10:50:13

你应该串连你的字符串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); 
    }) 
});

来源

2013-05-14 10:47:36

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

3生成DOM）虽然我不是那么好与CSS3渐变，但我注意到你的渐层的CSS似乎不正确。 background : linear-gradient(center top , #F68A28, #F36C00) repeat scroll 0 0 transparent;

来源

2013-05-14 11:11:13

通过jQuery应用css动态创建的div

回答

相关问题