Question

我有一些由另一个组件动态生成的HTML。简化版可以是：

<div class="classA">
 <div class="classB">Hello!</div>
</div>

classB元素在（document）.ready中不可用，但是当它被创建时，它是用我想要改变的内联CSS创建的。由于该元素在（document）.ready中不可用，我不能做到

$('.classB').css('color', 'red');

由于元素是使用内联css创建的，因此我无法使用普通的样式表。

问题：

如何将CSS与jQuery一起应用于（文档）.ready？

中不可用的元素

Answer 1

动态更改dom意味着包含点击事件意味着您必须将事件附加到dom。

尝试类似

的内容

$(document).on("click",".classB", function(){
    $('.classB').css('color', 'red');
 });

应该适合你。

您需要将事件绑定到父元素，其中文档通常由大多数人选择。

Answer 2

我不是百分之百确定你的要求，但我认为你一旦它到达我就是要求将一个元素应用于一个元素我是对的吗？

如果是这种情况，请查看http://api.jquery.com/css/这应该是您正在寻找的内容，这是相当类似的。

此样式允许您将css效果直接应用于生成元素。我的Jquery可能有点不能在一段时间内完成它

$('.classA').css( "background-color" : "red" );

这将在你的：

$(document).ready(fucntion(){
    //here
});

如果要在用户点击页面时生成此内容，请在此处查看适用于您的文档或元素的相应onClick函数：http://api.jquery.com/click/

Answer 3

由于您的代码不完整，但请考虑使用原型。

您正在使用某些代码将classB的元素附加到具有classA的特定div，因此在这种情况下，您需要使用以下代码定位.classB。

$(".classA").html("<div class='classB'></div>").find(".classB").css("color","red");

您可以在创建元素后立即使用.find()并将css代码应用于此

See Demo

我认为这可能会对你有帮助。

Answer 4

在您的Javascript中定义css不是一个好习惯，除非您有特别好的理由这样做。它使逻辑和样式之间的划分难以维持。

在你的情况下，你似乎想要使用一个有意义的类，那么在样式表中定义该类的css将很容易。样式表可以在html文档的头部定义，也可以从html document的头部链接到。

如果您需要，也可以稍后注入html样式表。 Add stylesheet to Head using javascript in body

如果您在样式表中定义了类，如下所示，该样式将在添加到DOM后立即应用于该元素。

.classB 
{
color:red;
}