div - ¿Cómo seleccionar un elemento que aún no existe(jQuery) y cambiar su estilo?

saber si existe un elemento javascript

Question

A continuación está mi código. Me gustaría cambiar el color de fondo de #preview div pero siempre falla al seleccionar #preview. Parece que no existe cuando se ejecuta el script. Otra secuencia de comandos jQuery lo crea más adelante.

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

¿Cómo selecciono todos los divs #preview actuales y futuros y cambio sus colores de fondo? Creo que hay algo como live () pero aún no he encontrado ejemplos con CSS.

Answer 1

No puedes. Básicamente, jQuery navega a través del árbol DOM para seleccionar el objeto adecuado.
Por lo tanto, ejecute el script después de cargar el documento.

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

#panel o #preview pueden no existir en su caso.

Answer 2

jQuery no tiene nada específicamente que ver con lo que has enumerado. Sin embargo, puedes agregar un elemento de style para hacerlo:

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

Como todas las reglas de estilo, eso se aplicará a medida que los elementos coincidan. Como lo está agregando al final del elemento del documento, debe ganar cualquier conflicto de estilo (salvo las diferencias de especificidad, pero los selectores de id son bastante específicos).

Ejemplo en vivo : probado y funcionando en Chrome, Firefox, Opera, IE6 e IE9

Answer 3

live() (que ahora está en desuso, por lo que debe usar on() lugar) es solo para eventos. No hay forma de seleccionar un elemento que aún no existe. Sin embargo, puedes crear un elemento como este:

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

Y este div aún no está adjunto a su documento. Puede manipular su CSS como lo desee con:

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

Entonces su script que fue previamente responsable de crear el script puede adjuntarlo en su lugar:

previewDiv.appendTo(parentElement);