Q: Dynamically change the image by uploading it with preview what I want is- (wysiwyg editor only for image) when user click on any image of my html page then the "choose file" button option should come up, without writing  any tags and I don't want to upload that image to the server so no need to use php or any other just want to preview it.
what I have done to achieve this 
//image that already there in html page
<div id="headshot" class="quickFade">
  <img id="blah" src="#" alt="your image" />
</div>
//grab the id of parent element of clicked image
$('img').click(function(event){
  if (event.target.nodeName == 'IMG'){
    var pratik = event.target.parentNode.id; 

// creates <input type="file" id="imgInp">  

var newElem = document.createElement('input');
    newElem.type = "file";      
    newElem.id = "imgInp";

    document.getElementById(pratik).appendChild(newElem);
  }
})

// preview the image after uploading the image and then remove the "choose file" button 
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$('#imgInp').change(function() {

document.getElementById("imgInp").remove();
  readURL(this);
});

this whole code dynamically generate <input type="file" id="imgInp"> below  <img id="blah" src="#" alt="your image" /> so this will like this 
<div id="headshot" class="quickFade">
  <img id="blah" src="#" alt="your image" />
<input type="file" id="imgInp">
</div>

upload process is working find but preview and removing the button after preview functionalities are not working
but when I manually put this code  <input type="file" id="imgInp">  by editing html file then removing the button after preview functionalities are working.
infect the functionalities are not dependence upon this code <input type="file" id="imgInp"> position I means I can put anywhere I want and still getting preview and removing functionalities are working but when this code <input type="file" id="imgInp">is code dynamically appeared through above JavaScript then this problem is arising

A: The reason it's not working, is because the element is dynamically created so you will need to use event delegation to detect the change in the DOM. In order to do this, you can use the JQuery on() method and assign the delegate as a static parent. Give this a try.


//grab the id of parent element of clicked image
$('img').click(function(event) {
  if (event.target.nodeName == 'IMG') {
    var pratik = event.target.parentNode.id;

    // creates <input type="file" id="imgInp">  

    var newElem = document.createElement('input');
    newElem.type = "file";
    newElem.id = "imgInp";

    document.getElementById(pratik).appendChild(newElem);
  }
})

// preview the image after uploading the image and then remove the "choose file" button 
function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

// this is all you need to change
$('#headshot').on('change', '#imgInp', function() {
  document.getElementById("imgInp").remove();
  readURL(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="headshot" class="quickFade">
  <img id="blah" src="https://www.gstatic.com/webp/gallery/1.jpg" alt="your image" />



A: 

let $img = null;

const $fileInput = $('<input>', {
  appendTo: 'body',
  accept: 'image/*',
  type: 'file',
  hidden: true,
  on: {
    change: function(ev) {
      const F = ev.target.files;
      if (!F || !F[0]) return;
      if (!(/^image\/(jpe?g|png|gif)$/).test(F[0].type)) return alert('Use images only');
      $img.one('load', ev => URL.revokeObjectURL(ev.target.src)).prop('src', URL.createObjectURL(F[0]))
    }
  }
});

$('img').on('click', function() {
  $img = $(this);
  $fileInput.click();
});
<div>
  <img src="//placehold.it/100x100/0bf"> Click to replace
</div>
<div>
  <img src="//placehold.it/100x50/f0b"> Click to replace
</div>

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>


