javascript - 使用 jQuery 更新 时，CSS 规则不会应用于新内容

Question

当页面首次加载时，一切正常。然后我给用户几个按钮来选择备用照片库。一旦他们点击，一些 jQuery 就会抓取另一个与 <div> 中最初相同的代码块。 (带有新 ID 和横幅)。但是，没有任何 CSS(位于外部文件中)应用于 <div> 内的新代码段。 .

“galBox”的内容被完全替换。

这是我正在处理的页面:http://www.cwholemaniii.com/pages/photography/index.shtml

以及我正在使用的(相关)代码:

function loadGallery(pickedGallery) {
  $("#galBox").html("<object data='" + pickedGallery.toLowerCase() + ".html'>");
}

.slideShowBox {
  position: relative;
  padding-bottom: 76%;
  height: 0;
  overflow: hidden;
}
.slideShowIFrame {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.galleryBox {
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>4
  <input type="button" onClick="loadGallery(this.value);" value="Top_Ten" />
  <input type="button" onClick="loadGallery(this.value);" value="Weddings" />
  <input type="button" onClick="loadGallery(this.value);" value="Animals" />
  <input type="button" onClick="loadGallery(this.value);" value="Portraits" />
  <input type="button" onClick="loadGallery(this.value);" value="Sky" />

</p>


<div class="galleryBox" id="galBox">
  <p>
    <img class="galleryHeader" src="/images/banners/top_ten_banner.jpg" id="animals" />
  </p>
  <h3>Top Ten</h3>
  <div class="slideShowBox">
    <iframe class="slideShowIFrame" src='https://flickrit.com/slideshowholder.php?height=75&size=big&speed=4.5&count=100&setId=72157650225649348&trans=1&thumbnails=1&transition=4&layoutType=responsive&sort=0' scrolling='no' frameborder='0'></iframe>
  </div>
</div>

Answer 1

您正在加载具有完全不同内容的#galBox。在第一个示例(初始状态)中，您有:

<div class="galleryBox" id="galBox">
  <p>
    <img class="galleryHeader" src="/images/banners/top_ten_banner.jpg" id="animals" />
  </p>
  <h3>Top Ten</h3>
  <div class="slideShowBox">
    <iframe class="slideShowIFrame" src='[url]' scrolling='no' frameborder='0'></iframe>
  </div>
</div>

但是你把它替换成

<div class="galleryBox" id="galBox">
    <object date='[etc]'></object>
</div>

您包含的所有 css 都不适用于您新创建的对象。