How to fix not working Jquery on a html page, that was dynamically loaded into a div?

Question

i'm loading a html file into my index.php by using jQuery.

$("#load").click(function() {
   $("#content").load("/content/page.html");
});

The page.html content:

<img class="img" src="https://www.nzxt.com/uploads/download/attachment/117/Phantom-530-wallpaper-1920x1080-3.jpg"><br/>
<p style="color:green">test.html Success 1</p>

I have also a function that changes the size of the image when the window width changes, problem is, when the page loads... the image is shown in 1920x1080px, but it should be 80% of window width.

  function img_resize(ww,wh) {
    $(".img").css("width", ww);
      var img_w = $(".img").width();
    $(".img").css("margin", wh);
  };

So after clicking the button, the page.html loads into the index.php div , the image shows in 1920x1080px resolution, when i resize the browser window, the image shrinks to 80% of window width and can't use css width:80%; for it, because it has other functions that define the size (pixels) of the image, that's just calculation. But the code above img_resize(ww,wh) is setting/adding the width to the image. I tried with mousemove, mouseover and onload, nothing worked.

<img class="img" src="https://www.nzxt.com/uploads/download/attachment/117/Phantom-530-wallpaper-1920x1080-3.jpg" onload="img_resize()"><br/>
<p style="color:green">test.html Success 1</p>

How can i "start" the img_resize() function when the page.html file is loaded?

Answer 1

You can use callback of .load() function.

$("#load").click(function() {
   $("#content").load("/content/page.html", function(response, status, xhr) {
     if ( status != "error" ) {
       img_resize(ww,wh);
     }
   });
});

Remeber to supply ww and wh parameters as per your need.

Answer 2

        <img class="img" 
         src="https://www.nzxt.com/uploads/download/attachment/117/Phantom-
         530-wallpaper-1920x1080-3.jpg" style="width: 80%;"><br/>

try this working for me!