Click event with .on is not firing over appended elements [duplicate] - append

Question

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 9 years ago.
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

Answer 1

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