Wrap is not working on dynamically loaded element. Why?-CodePudding

The wrap(); works well on its own, but when it is called after the load();, it doesn't.

What could be done to make it work? I tried to put the wrap(); code inside a separate .js file, but that didn't work. I also tried to load the wrap(); inside: $( window ).on( "load", function() { ... }) and then place it inside the footer of the html, which didn't solve the problem either.

Here is my code:

$('.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" ><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/cup_revolution_logo.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-49">
            </div>
                <figcaption  id="gallery-1-49">
                www.web.cuprevolution.eu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-39">
            </div>
                <figcaption  id="gallery-1-39">
                www.areklam.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/coca_cola.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-48">
            </div>
                <figcaption  id="gallery-1-48">
                www.coca-cola.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-40">
            </div>
                <figcaption  id="gallery-1-40">
                www.arkad.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-41">
            </div>
                <figcaption  id="gallery-1-41">
                www.besttv.hu
                </figcaption></figure> 
        </div>

Edit 1# & 2#:

I need to wrap each .gallery-items of the #gallery-1 after it loaded from https://webhelytervezo.hu/ into the #partner div of page with the .page-id-202 class (https://webhelytervezo.hu/en/) and the page with the class .page-id-201 (https://webhelytervezo.hu/en/). The code works only on the main page (where the content is not loaded but there without needed to be loaded).

Edit 3#

Now the code is:

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');
     })
      });

How can I simplify it?

CodePudding user response：

Load is asynchronous function. Put your code inside callback function of the load method.

$('.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');
     })   
})

CodePudding user response：

You need to wrap it aroung the img tag instead of its predecessor:

$('.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" ><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/cup_revolution_logo.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-49">
            </div>
                <figcaption  id="gallery-1-49">
                www.web.cuprevolution.eu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/areklam.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-39">
            </div>
                <figcaption  id="gallery-1-39">
                www.areklam.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/coca_cola.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-48">
            </div>
                <figcaption  id="gallery-1-48">
                www.coca-cola.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/arkad.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-40">
            </div>
                <figcaption  id="gallery-1-40">
                www.arkad.hu
                </figcaption></figure><figure >
            <div >
                <img width="200" height="74" src="https://webhelytervezo.hu/wp-content/uploads/2022/01/besttv.jpg"  alt="" loading="lazy" aria-describedby="gallery-1-41">
            </div>
                <figcaption  id="gallery-1-41">
                www.besttv.hu
                </figcaption></figure> 
        </div>