Question

我正在尝试使用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"                                    
    });
}
});

Answer 1

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

你可以看到我添加了：

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

你可以看到，如果你把元素放在最初改变页面上的CSS上，那么CSS就可以了。问题是当你想要更改它的CSS时（在文档加载时）元素不存在 - 这需要在click事件上，通过事物的外观来完成。

Answer 2

我认为你已经在这个问题上回答了你自己的问题：你指定的CSS样式只会被文档就绪解雇，因此只有那些在你的选择器中出现在DOM中的元素才会被触发及时将收到样式。

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

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

Answer 4

Here's the working demo.

您的代码有3个问题：

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

2）在$(".eventNameTagColor"+ eventsArray[i])

上生成dom时，您在$(document).ready上将{css}应用于$(".testClick").on("click",function(){ });

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

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

4 个答案: