jQuery: Event can't work on the element which is dynamically created

Question

My problem is:

When I press the "Show numbers" button, Javascript dynamically create two elements whose class is "number". I expect the computer will console the text of the element which I click. But no matter how hard I try to click the elements, my computer console nothing.

HTML (Pug):

 button#btn show numbers
 .numberlist

Produced HTML:

<button id="btn">show numbers</button>
<div class="numberlist"></div>

JavaScript:

 $("#btn").click(
   function(){
     $(".numberlist").html("<div class='number'>1</div><div class='number'>2</div>");
   }
 );

 $(".number").click(
   function(){
     console.log("You click number "+$(this).text());
   }
 );

It's the page on Codepen.

try using $(document).on("click",".number", function() { /*your code* /}); — sandes, Jun 18 '18 at 17:39
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Louys Patrice Bessette, Jun 18 '18 at 17:42
Can you please edit your question to include the html? Not everyone can access offsite paste sites, and those links can go dead for future readers. — Taplar, Jun 18 '18 at 17:43

score 3 · Accepted Answer · answered Jun 18 '18 at 17:40

3

You need to use event delegation; since $(".number") is targeting an element with class="number" and assigning an event, that element needs to be present when the function is defined. Since you're appending (via .html) that element, it does not exist when your function is declared. To handle this, use:

$("body").on("click", ".number", function(){
  console.log("You click number "+$(this).text());
});

This will assign the click handler to any elements in body that have a class of .number, even ones that are added dynamically.

answered Jun 18 '18 at 17:40

Tim Lewis

27,813
13
73
102

Thank you guys!!! I know what the problem is. It's my first time to post a question on StackOverFlow and I'm really nervous about my poor English. I just learn about how to dynamically add the html, so I didn't sense the problem when I coding. Thanks again!!! – Winnie_Hung Jun 18 '18 at 17:55

jQuery: Event can't work on the element which is dynamically created

1 Answers1