I am trying to implement the PanZoom JS Functionality in my Code. The Code works fine when I add the static Image to the The WebPage and add the PanZoom Function to it.

Eg:

>>HTML

<div class="imageSection"> 
    <div class="image-box" id="targetLayer">
    <img id="scene" class="image-preview" src="uploads/Jack-Ceph.jpg" class="upload-preview" />
    </div> 
</div>

>>JS
  var element = document.getElementById('scene')
  panzoom(element,{
  maxZoom: 5,
  minZoom: 0.5,
  transformOrigin: {x: 0.5, y: 0.5}
 })

But the Problem is that When I add the Image dynamically using the Jquery POST method and PHP The PanZoom JS stops working.

The Code I tried for adding the Image dynamically is :

HTML

 <form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
  <input id="picture" name="picture" type="file" >
  <p>Drag your files here or click in this area.</p> 
  <button id="upload" name="upload" type="submit">Upload</button> 
 </form>

JS

// Upload image using Ajax
  $(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
      e.preventDefault();
      $.ajax({
        url: "upload.php",
        type: "POST",
        data:  new FormData(this),
        contentType: false,
        cache: false,
        processData:false,
        success: function(data)
          { 
        $("#targetLayer").html(data);
          },
          error: function() 
          {
          }             
       });
    }));
  });

Upload.php

if(is_array($_FILES)) {
if(is_uploaded_file($_FILES['picture']['tmp_name'])) {
$sourcePath = $_FILES['picture']['tmp_name'];
$targetPath = "uploads/".$_FILES['picture']['name'];
if(move_uploaded_file($sourcePath,$targetPath)) {
?>
<img id="scene" class="image-preview" src="<?php echo $targetPath; ?>" class="upload-preview" />
<?php
}
}
}

So When I run the above code, i get the error :

Uncaught Error: Cannot create panzoom for the current type of dom element at createPanZoom

and the Panzoom effect doesn't work.