Wrap 不適用於動態加載的元素。 為什么？

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 iorgu想引起更多關注這個問題：

我只需要我的問題的答案。 還沒有人回復它。

wrap(); 單獨運行良好，但是在load(); ，它沒有。

可以做些什么來讓它發揮作用？ 我試圖把wrap(); 單獨的.js 文件中的代碼，但這不起作用。 我也嘗試加載wrap(); inside: $( window ).on( "load", function() {... })然后將其放在 html 的頁腳內，這也沒有解決問題。

這是我的代碼：

 $('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1'); $(".gallery-item").each(function() { $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim())); $("#gallery-1 a").attr('target','_blank'); });

 figcaption{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="gallery-1" class="gallery galleryid-9 gallery-columns-3 gallery-size-full"><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/cup_revolution_logo.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-49"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-49"> www.web.cuprevolution.eu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-39"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-39"> www.areklam.hu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/coca_cola.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-48"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-48"> www.coca-cola.hu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-40"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-40"> www.arkad.hu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-41"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-41"> www.besttv.hu </figcaption></figure> </div>

編輯 1# & 2#:

I need to wrap each .gallery-item s of the #gallery-1 after it loaded from https://webhelytervezo.hu/ into the #partner div of page with the .page .page-id-202 class ( https://webhelytervezo .hu/en/ ）和帶有 class .page .page-id-201的頁面（ https://webhelytervezo.hu/en/ ）。 該代碼僅適用於主頁（內容未加載但無需加載）。

編輯3#

現在代碼是：

jQuery(document).ready(function( $ ){
$('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1', function(){
      $(".gallery-item").each(function() {
          $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim()));
          $("#gallery-1 a").attr('target','_blank');
     })
});
  $(".gallery-item").each(function() {
          $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim()));
          $("#gallery-1 a").attr('target','_blank');
     })
      });

我怎樣才能簡化它？

Answer 1

負載是異步的 function。 將您的代碼放在 load 方法的回調 function 中。

$('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1', function(){
      $(".gallery-item").each(function() {
          $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this).text().trim()));
          $("#gallery-1 a").attr('target','_blank');
     })   
})

Answer 2

您需要將其包裹在img標簽而不是其前身：

 $('.page-id-202 #partner, .page-id-201 #partner').load('https://webhelytervezo.hu/ #gallery-1'); $(".gallery-item.gallery-icon img").each(function() { $(this).wrap($("<a/>").attr("href", "http://" + $(".gallery-caption", this.parentNode.parentNode).text().trim())); $("#gallery-1 a").attr('target','_blank'); });

 figcaption{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="gallery-1" class="gallery galleryid-9 gallery-columns-3 gallery-size-full"><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/cup_revolution_logo.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-49"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-49"> www.web.cuprevolution.eu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-39"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-39"> www.areklam.hu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/coca_cola.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-48"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-48"> www.coca-cola.hu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-40"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-40"> www.arkad.hu </figcaption></figure><figure class="gallery-item"> <div class="gallery-icon landscape"> <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg" class="attachment-full size-full" alt="" loading="lazy" aria-describedby="gallery-1-41"> </div> <figcaption class="wp-caption-text gallery-caption" id="gallery-1-41"> www.besttv.hu </figcaption></figure> </div>