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

Question

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

Please post your code here, users shouldn't have to go to a different site to see it — Patrick Evans, Sep 16 '17 at 16:07
It **a simple typographical error**. `$("myDiv")` should be `$("#myDiv")` with a `#` as you are selecting by ID not by tagname. — ibrahim mahrir, Sep 16 '17 at 16:11
@MoMoWongHK ... that should make you consider removing the post. — ibrahim mahrir, Sep 16 '17 at 16:30

score 1 · Accepted Answer · answered Sep 16 '17 at 16:11

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");
});

score 1 · Answer 2 · answered Sep 16 '17 at 16:19

1

You just missed # while using myDiv as a selector!

Wrong:

$("myDiv").cl....

Corrected:

$("#myDiv").cl.....

answered Sep 16 '17 at 16:19

Abhishek Kumawat

780
1
10
25

score 0 · Answer 3 · answered Sep 16 '17 at 17:03

You need to use event Delegation since the element is not added to dom yet. You need to capture the click on its parent.

$('#myDiv').on("click", "#color-picker-box", function(e){
  console.log('color box clicked');
});

Read more about it on: https://learn.jquery.com/events/event-delegation/
http://api.jquery.com/on/

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

3 Answers3