javascript - Jquery .click() not work if HTML element not yet added

I tried method :

Attaching click event to a JQuery object not yet added to the DOM

but seems not working in my situation. After I created dom elements by jquery, the newly created elements are not accessible. What I want is to after clicking "click me" button, and the image will show up and I hope click the image and a div (#color-picker-box) to show up.

My code: https://codepen.io/MoMoWongHK/pen/ZXbWYb

Answer

add the number sign # when calling the id of your div,

from

$("myDiv").on("click" ,".color-picker-icon" , function(){
    alert("hi");
    $("#color-picker-box").removeClass("display-none");
});

to

$("#myDiv").on("click" ,".color-picker-icon" , function(){
    alert("hi");

    $("#color-picker-box").removeClass("display-none");
});