Jquery Event Click does not work in image preview

Question

Clicking the img element does not work to call a JS function, which I am doing wrong ?

Follow the code below:

HTML:

<label class="control-label">Select File</label>
<input id="input-id" type="file" class="file">

JS:

$("#input-id").fileinput({
  showZoom: true,
  zoomIcon: false
});

//Tentativa 1
$("img[class='kv-preview-data file-preview-image']").on('click', function() {
  alert('addMore click event');
});

//Tentativa 2
$("img[class='kv-preview-data file-preview-image']").click(function() {
  alert( "Handler for .click() called." );
});

//Tentativa 3
$(document).ready(function() {
  $("img[class='kv-preview-data file-preview-image']").click(function () {
    alert("Hello!");
  });
});

//Tentativa 4
$(".kv-file-content").on('click', function() {
  alert('addMore click event');
});

None of the 4 attempts do not work. Follow example JSFIDDLE.

Follow the image where you should click:

Some solution ?

Answer 1

$(".file-preview").on('click', "img[class='kv-preview-data file-preview-image']", function() {
  alert('addMore click event');
});

You have to delegate that event since that image doesn’t exist when you run jQuery. How are you doing jQuery looks for img[class='kv-preview-data file-preview-image'], does not find and adds anything.

Using $(algoExistente).on(evento, delegado, function(){ he will look for the delegado at the moment of the click inside algoExistente.

jsFiddle: https://jsfiddle.net/DTcHh/30009/