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
– Patrick Evans, Commented Sep 16, 2017 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
– ibrahim mahrir, Commented Sep 16, 2017 at 16:11
@MoMoWongHK ... that should make you consider removing the post. — ibrahim mahrir
– ibrahim mahrir, Commented Sep 16, 2017 at 16:30

Nove Sanchez · Accepted Answer · 2017-09-16 16:11:38Z

1

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

answered Sep 16, 2017 at 16:11

Nove Sanchez

995 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek Kumawat · Accepted Answer · 2017-09-16 16:19:08Z

1

You just missed # while using myDiv as a selector!

Wrong:

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

Corrected:

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

answered Sep 16, 2017 at 16:19

Abhishek Kumawat

8083 gold badges11 silver badges27 bronze badges

Comments

anshu purohit · Accepted Answer · 2017-09-16 17:03:38Z

0

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/

answered Sep 16, 2017 at 17:03

anshu purohit

1762 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related