如何选择尚不存在的元素（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更改的例子。

- Atadj

Answer 1

jQuery并没有与你列出的内容有任何特定关系。不过，你可以添加一个style元素来实现它：

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

像所有样式规则一样，只有当任何元素匹配它时才会应用。由于你将其添加到文档元素的末尾，它应该在样式冲突时获胜（除了特异性差异，但是id选择器非常具体）。

演示示例 - 在Chrome、Firefox、Opera、IE6和IE9中测试并工作正常

- T.J. Crowder

Answer 2

您无法这样做。基本上，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 在您的情况下可能不存在。

- Sang

Answer 3

live()（现已弃用，应改用on()）仅适用于事件。无法选择尚不存在的元素。但是，您可以像这样创建一个元素：

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

而且这个 div 还没有附加到您的文档中。您可以使用以下方式自由地操作其 CSS：

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

然后，之前负责创建脚本的脚本现在只需要将其附加即可：

previewDiv.appendTo(parentElement);

- Nathan MacInnes