Question

我遇到一个问题，在JQuery中，动态添加的DOM节点不采用CSS文件中定义的样式。

我环顾四周，the answers I've seen，不解决问题。即，相关的CSS位于相对于主页的路径中。这绝对是在记忆中。但是如果我使用A）或B），附加或加载的'newNode'不会采用已经加载的样式。

A）$("#some-selector").append(newNode);

B）$("#some-selector").load("/path/to/newNode.html");

我发现我必须手动添加样式

C）$(".loadedElement").css('some-style','some-value');

有人解决了这个问题吗？

提前致谢。

---编辑

所以我得到了更多。我有像A）这样的HTML和像B这样的CSS。事实证明，嵌套的CSS选择器与我想要的节点不匹配。我不得不像C）那样去选择一个选择器。然后我的动态节点应用了样式。但我真的更喜欢像B）这样的东西。我的CSS关闭了吗？

A）

<div id='6bullet-container'>
  <input id='six-bullet-image-upload' name='convert' type='file'>
    <div class='six-bullet-content-wrapper'>
      <div class='six-bullet-container-label'>
        click to upload
      </div>
      <div id='six-bullet-title'></div>
      <div class='six-bullet-bullet' id='six-bullet-one'></div>
      <div class='six-bullet-bullet' id='six-bullet-two'></div>
      <div class='six-bullet-bullet' id='six-bullet-three'></div>
      <div class='six-bullet-bullet' id='six-bullet-four'></div>
      <div class='six-bullet-bullet' id='six-bullet-five'></div>
      <div class='six-bullet-bullet' id='six-bullet-six'></div>
   …

B）

#6bullet-container #six-bullet-image-upload .six-bullet-content-wrapper .six-bullet-bullet {
   my: style;
}

C）

.six-bullet-bullet {
    my: style;
}

Answer 1

这个CSS选择器：

#6bullet-container #six-bullet-image-upload .six-bullet-content-wrapper .six-bullet-bullet  { ... }

意味着“六子弹内容包装”是“六子弹图像上传”的孩子，这是不可能的，因为“六子弹图像上传”是一个文件输入框而且不能有孩子。

JQuery动态添加了DOM丢失（不）CSS样式

1 个答案: