通過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

回答

相關問題