0

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

4 回答 4

0

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

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

于 2013-05-14T10:40:11.743 回答
0

你应该连接你的字符串 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-14T10:47:36.190 回答
0

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

你可以看到我添加了：

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

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

于 2013-05-14T10:38:54.480 回答
0

这是工作演示。

您的代码存在 3 个问题：

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

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

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

于 2013-05-14T11:11:13.713 回答