applying css through jquery for a dynamically created divs

Question

I am trying to add css Properties using jquery for dynamically created divs and i specify the jquery css part at document load time. but when I add divs dynamically later using any event, those divs with class names will not get the properties specified. Ive added the sample code in a fiddle.. http://jsfiddle.net/nEgzY/9/

in the fiddle, the div gets appended on button click, bt u can see it doesnt get the properties specified..

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

The issue is with your code, look here: http://jsfiddle.net/nEgzY/10/

You can see I've added:

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

You can see that if you put the element you're changing the CSS of on the page originally, then the CSS applies fine. The problem is that the element does not exist at the time you're wanting to change the CSS of it (on document load) - this needs to be done on the click event, by the looks of things.

Answer 2

I think you've answered your own question on this one: the CSS styles you're specifying are only getting fired at Document Ready, so only the elements that appear in the DOM that match your selector at that point in time will receive the styles.

When adding CSS via jQuery it adds it directly to the targeted elements as inline styles. If you add new elements to the page afterwards, they won't have them unless you specifically style them (again) via the JS (ie: adding them to your printHTML variable).

Answer 3

You should concatenate your string printHTML, it should be

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

});

a better way to do this is

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.

There are 3 problems with your code:

1) You missed semi-colon here printHTML = "<div class='eventNameTagColor"+eventsArray[i] +"'> test </div>"

2) You applied css to $(".eventNameTagColor"+ eventsArray[i]) on $(document).ready while the dom is generated on $(".testClick").on("click",function(){ });

3) Though I'm not so good with CSS3 Gradients but I noticed your css for gradients seems incorrect. background : linear-gradient(center top , #F68A28, #F36C00) repeat scroll 0 0 transparent;