동적으로 추가 된 요소의 CSS를 변경하는 방법은 무엇입니까?

Question

"data_record"클래스가있는 여러 div를 동적으로 DOM에 추가하려고합니다.

클릭 할 때마다 하나의 색상을 바꾸고 다른 하나는 흰색 배경으로 되돌리기를 원합니다. 여기

내 코드는

$(document).on('click', ".data_record", function(event) { 
    //turn all others white (this DOES NOT work!) 
    $('.data_record').css('background','#ffffff'); 

    //turn the clicked element a different colour (this DOES work!) 
    $(this).css('background', '#EDC580'); 
}); 

그래서 나는 동적으로별로 요소를 어떻게 추가을 타겟으로 할 ... data_record 요소를 추가 성공적으로 가진 후이 작업을 수행하는 것입니다?

감사합니다.

Answer 1

배경 색상 설정 .css('background-color',value)를 사용해보십시오 :

$(document).on('click', ".data_record", function(event) { 
//turn all others white (this now works!) 
    $('.data_record').css('background-color','#ffffff'); 

//turn the clicked element a different colour (this DOES work!) 
    $(this).css('background-color', '#EDC580'); 
}); 

Answer 2

이 변경을 하는가를?

$ ('. 데이터 _ 레코드') .css ('배경색', '#fffffff'); 코드가 가지를 잘하지만, '배경'jQuery를 작동하지 않습니다 그래서

Answer 3

$(document).ready(function(){ 
    var n=0; 
    while(n<10) 
    { 
     $("body").append("<div class=dataRecord>Height</div>"); 
     n++; 
    } 

    $(".dataRecord").on("click",function(event){ 
     var self=$(this); 

     $(".dataRecord").css("color","black"); 
     self.css("color","white"); 
    }); 

바이올린 http://jsfiddle.net/sgW77/1/