Click event with .on is not firing over appended elements

Question

My problem is, that even when I use .on, the click event over added div with class added does not triggers. This is my script from page.

$(".added").on("click", function () { alert("halo") });

$("#nextAdress").on("click",function (event) {
    event.preventDefault();
    $("#trainerRegistrationFields").append('<div class="added">adsa</div>');
}

Can you please help me so the click event will trigger also on the dynamically added element with class added?

Tahnk you in advance

Variations on this question are one of the most frequently asked questions about jquery on SO. I googled your question title and the top 5 responses are all stackoverflow questions with the correct answer. — Zach Lysobey, Sep 17 '13 at 20:17

PSL · Accepted Answer · 2013-09-17T20:32:10.087

12

You can use event delegation syntax of on for dynamically added element.

$("#trainerRegistrationFields").on("click",".added", function (){ 
    alert("halo") ;
});

In your code you are binding the handler only to the element that existed in DOM during the time of event binding. You can also do this way:

or add the handler here while you append the item.

   function handleClick(){
      alert("halo");
   }

   $(".added").on("click", handleClick); //for the already existing elements

   $("#nextAdress").on("click",function (event) {
       event.preventDefault();
       $("#trainerRegistrationFields").append($('<div class="added">adsa</div>').on('click', handleClick));
   }

edited Sep 17 '13 at 20:32

answered Sep 17 '13 at 20:13

PSL

120,386
19
245
237

1

curious why someone downvoted this. This is the correct answer. – Zach Lysobey Sep 17 '13 at 20:20
Downvoter care to explain... – PSL Sep 17 '13 at 20:20
take back your +2, at least I never do revenges. – Omar Sep 17 '13 at 22:15

Click event with .on is not firing over appended elements

1 Answers1