Why doesn't clicking on a newly created element work?

Question

JavaScript

This is how I create the element

var date = new Date();
      var path =  '/frontend/web/image/frontendImage/carusel/'+date.getFullYear()+'/'+(1+date.getMonth())+'/avatar-'+file.name;
      var img = document.createElement('img');
      img.src = path; 
      img.setAttribute('class','draggable ui-widget-content');
      document.getElementById('forIMG').appendChild(img);

then I try to display an alert

$("#forImg").on('click','.draggable',function () {
        alert('yes');
    });

but alert doesn't work, can you tell me why?

Answer 1

getElementById('forIMG')
$("#forImg")
Which id is correct?

Answer 2

You don't have to fire cannons at sparrows.

from PIL import Image

img = Image.open("img.jpg")

w5 = (img.size[0] // 100) * 5
h5 = (img.size[1] // 100) * 5

croped = img.crop(
    (
        w5,
        h5,
        img.size[0] - w5,
        img.size[1] - h5
    )
)

croped.save("croped.jpg")

Or even easier for square images

from PIL import Image
from PIL import ImageOps

img = Image.open("img.jpg")
w5 = (img.size[0] // 100) * 5

croped = ImageOps.crop(img, w5)
croped.save("croped.jpg")