Применение css через jquery для динамически созданных divs

Question

Я пытаюсь добавить свойства css с помощью jquery для динамически созданных div и я определяю часть jquery css во время загрузки документа. но когда я добавляю divs динамически позже, используя любое событие, те divs с именами классов не будут получать указанные свойства. Ive добавил пример кода в скрипкой .. http://jsfiddle.net/nEgzY/9/

в скрипку, то ДИВ добавляемый на кнопку мыши, 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"          
    }); 
} 
}); 

Answer 1

Этот вопрос с кодом, смотрите здесь: http://jsfiddle.net/nEgzY/10/

Вы можете видеть, я добавил:

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

Вы можете видеть, что если вы р ut элемент, который вы меняете CSS на странице изначально, тогда CSS применяется отлично. Проблема в том, что элемент не существует в то время, когда вы хотите изменить его CSS (при загрузке документа) - это нужно делать при событии click, при просмотре вещей.

Answer 2

Я думаю, что вы ответили на свой собственный вопрос по этому поводу: стили CSS, которые вы указываете, запускаются только в документе Ready, поэтому только те элементы, которые отображаются в DOM, которые соответствуют вашему селектору в тот момент в время получит стили.

При добавлении CSS через jQuery он добавляет его непосредственно к целевым элементам в виде встроенных стилей. Если после этого вы добавите новые элементы на страницу, они не будут иметь их, если вы специально не нарисуете их (снова) через 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) Вы нанесли CSS к $(".eventNameTagColor"+ eventsArray[i]) на $(document).ready в то время как дом генерируется на $(".testClick").on("click",function(){ });

3) Хотя я не так хорошо с CSS3 Градиенты, но я заметил ваш CSS градиентов кажется неправильным. background : linear-gradient(center top , #F68A28, #F36C00) repeat scroll 0 0 transparent;