Cách chọn phần tử chưa tồn tại (jQuery) và thay đổi kiểu của nó?

Question

Dưới đây là mã của tôi. Tôi muốn thay đổi màu nền của #preview div nhưng không phải lúc nào cũng chọn #preview. Dường như nó không tồn tại khi kịch bản thực thi. Kịch bản lệnh jQuery khác tạo ra nó sau này.

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

Làm cách nào để chọn tất cả div #preview hiện tại và trong tương lai và thay đổi màu nền? Tôi nghĩ rằng có một cái gì đó như sống() nhưng tôi đã không tìm thấy ví dụ với sự thay đổi CSS được nêu ra.

Answer 1

jQuery không có gì đặc biệt để làm những gì bạn đã liệt kê. Bạn có thể thêm phần tử style để làm điều đó, mặc dù:

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

Giống như tất cả các quy tắc kiểu, sẽ áp dụng khi và khi bất kỳ yếu tố nào khớp với quy tắc đó. Khi bạn thêm nó vào cuối phần tử tài liệu, nó sẽ giành được bất kỳ xung đột kiểu nào (chặn sự khác biệt về đặc trưng, ​​nhưng id bộ chọn là khá cụ thể).

Live example - Kiểm tra và làm việc trong Chrome, Firefox, Opera, IE6, và IE9

Answer 2

live() (mà bây giờ bị phản đối, vì vậy bạn nên sử dụng on() thay) chỉ dành cho các sự kiện. Không có cách nào để chọn một phần tử chưa tồn tại. Tuy nhiên, bạn có thể tạo phần tử như sau:

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

Và div này chưa được đính kèm với tài liệu của bạn. Bạn có thể thao tác CSS của nó như là bạn hài lòng với:

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

Sau đó, kịch bản của bạn mà trước đây chịu trách nhiệm cho việc tạo các kịch bản chỉ có thể đính kèm nó thay vì:

previewDiv.appendTo(parentElement); 

Answer 3

Bạn không thể. Về cơ bản jQuery nevigate thông qua cây DOM để chọn đối tượng thích hợp.
Vì vậy, hãy chạy tập lệnh sau khi tài liệu được tải.

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

#panel hoặc #preview có thể không tồn tại trong trường hợp của bạn.