如何选择尚不存在的元素（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 元素来执行此操作：

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

与所有样式规则一样，该规则将在任何元素与其匹配时应用。当您将其添加到文档元素的末尾时，它应该会赢得任何样式冲突（除非特异性差异，但 id 选择器非常具体）。

实例 - 已在 Chrome、Firefox、Opera、IE6 和 IE9 中测试并运行

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。

Answer 3

live() （现已弃用，因此您应该使用 on() 代替）仅适用于事件。无法选择尚不存在的元素。但是，您可以创建这样的元素：

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

并且此 div 尚未附加到您的文档。您可以随意操作它的 CSS：

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

然后您之前负责创建脚本的脚本可以直接附加它：

previewDiv.appendTo(parentElement);