更新时 <div> 使用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都不适用于新创建的对象。

Answer 2

好像我误解了("#galBox").html("<object data='" + pickedGallery.toLowerCase() + ".html'>"); 在工作。

我需要的是$('#galBox').load(pickedGallery.toLowerCase() + ".html")

这是由于我没有想到的方式添加了各种其他代码。