Как выбрать элемент, который еще не существует (jQuery) и изменить его стиль? - PullRequest
Новая
       22

Как выбрать элемент, который еще не существует (jQuery) и изменить его стиль?

7 голосов
/ 19 января 2012

Ниже мой код.Я хотел бы изменить цвет фона #preview div, но он всегда не может выбрать #preview.Кажется, что он не существует, когда скрипт выполняется.Другой скрипт jQuery создаст его позже. 

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

Как выбрать все текущие и будущие элементы #preview и изменить их цвет фона?Я думаю, что есть что-то вроде live (), но я еще не нашел пример с изменением CSS.

Ответы [ 3 ]

8 голосов
/ 19 января 2012

jQuery не имеет ничего общего с тем, что вы перечислили.Вы можете добавить элемент style, чтобы сделать это, хотя: 

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

Как и все правила стиля, они будут применяться как и когда любые элементы соответствуют ему.Когда вы добавляете его в конец элемента документа, он должен победить в любых конфликтах стилей (за исключением различий в специфичности, но селекторы id довольно специфичны).

Живой пример - Протестировано и работает в Chrome, Firefox, Opera, IE6 и IE9

2 голосов
/ 19 января 2012

Вы не можете.По сути, 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 может не существовать в вашем случае.

1 голос
/ 19 января 2012

live() (который устарел, поэтому вместо него следует использовать on()) только для событий.Нет способа выбрать элемент, который еще не существует.Однако вы можете создать такой элемент: 

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

И этот div еще не прикреплен к вашему документу.Вы можете манипулировать его CSS по своему усмотрению: 

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

Тогда ваш скрипт, который ранее отвечал за его создание, может просто присоединить его вместо:

...