How to change path of img for dynamically loaded template

Question

Have a template with button.. Onclick of the button loading another template using Jquery load().

Example:

Template1:

<div id='tp1'>
   <button>Load</button>
   <div class="sub"></div>
</div>

Template2:

   <div id='tp2'>
       <img src='../abc/amd/aa.jpg' class="iPath"/>
       <img src='../edf/dfv/bb.jpg' class="iPath"/>
       <img src='../fgh/vbf/cc.jpg' class="iPath"/>
   </div>

Now I need to change the src of tp2 for all the images, but the paths for each image is different.

img1 path: ../qwe/afg/aa.jpg
img2 path: ../asd/zvb/bb.jpg
img3 path: ../zxc/qrt/cc.jpg

Jquery:

 $(document).ready(function(){
    $('button').click(function(){
      $('.sub').load("../abbb.html");
      console.log($('.iPath'));
    });
});

But here the iPath is undefined, because the load of the template 2 is not rendered. How do I know whether the page is successfully loaded or not, so that it will be easy to change the source of the page....

Answer 1

Try adding a callback to load(), with required data.

A callback function that is executed when the request completes.

$('.sub').load("../abbb.html",function(data){
    $(data).find('.iPath');
});

To change the src of image, you need to set the attribute using

$('.sub').load("../abbb.html",function(data){
    $(data).find('.iPath').each(function(){
         $(this).attr('src','...')
    });
});