更新時 <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")

這是由於我沒有想到的方式添加了各種其他代碼。