아직 존재하지 않는 요소 (jQuery)를 선택하고 스타일을 변경하는 방법은 무엇입니까?

Question

아래 코드는 제 코드입니다. #preview div의 배경색을 변경하고 싶지만 항상 #preview를 선택하지 못했습니다. 그것은 스크립트가 실행될 때 존재하지 않는 것 같습니다. 다른 jQuery 스크립트가 나중에이 스크립트를 작성합니다.

jQuery("#panel").mouseleave(function(){ 
    var good_color = jQuery('.colorpicker_hex input').val(); 
    jQuery("#preview").css({ 'background-color': good_color }); 
}); 

현재 및 미래 #preview div를 선택하고 배경색을 변경하려면 어떻게해야합니까? 나는 live()와 같은 것이 있다고 생각하지만 CSS가 변경된 예제는 아직 찾지 못했다.

Answer 1

jQuery는 특별히 나열한 작업을 수행 할 권한이 없습니다. 로 적용됩니다 모든 스타일 규칙처럼

$("<style>#preview { background-color: #eee; }</style>") 
    .appendTo(document.documentElement); 

을하고, 어떤 요소가 일치하는 경우 : 당신은하지만, 그것을 할 수있는 style 요소를 추가 할 수 있습니다. 문서 요소의 끝에 추가 할 때마다 스타일 차이가 발생하지만 특수성 차이는 없지만 id 선택기는 매우 구체적입니다.

Live example - 테스트 및 크롬, 파이어 폭스, 오페라, IE6 및 IE9에서 작업이 (대신 on()를 사용해야합니다 그래서 지금, 더 이상 사용되지 않습니다)

Answer 2

live() 단지 이벤트입니다. 아직 존재하지 않는 요소를 선택할 방법이 없습니다. 그러나이 같은 요소를 만들 수 있습니다

var previewDiv = $('<div id="#preview" />'); 

을 그리고 이것은 아직 문서에 첨부되지 div에. 당신이 원하는대로 당신은 CSS를 조작 할 수 있습니다 :

previewDiv.css({ 'background-color': good_color }); 

그럼 그냥 대신에 첨부 할 수있는 스크립트를 생성 이전에 책임 스크립트 :

previewDiv.appendTo(parentElement); 

Answer 3

당신은 할 수 없습니다. 기본적으로 jQuery는 DOM 트리를 통해 적절한 객체를 선택합니다.
문서가로드 된 후 스크립트를 실행하십시오.

$(document).ready(function() { 
    jQuery("#panel").mouseleave(function(){ 
     var good_color = jQuery('.colorpicker_hex input').val(); 
     jQuery("#preview").css({ 'background-color': good_color }); 
    }); 
}); 

#panel 또는 #preview는 경우에 존재하지 않을 수도 있습니다.