Event is not triggered after adding new elements

Question

I have HTML list:

<ul>

contains initial items of:

<li>

I have added new items dynamically to that list. Old items are responding very well , but the new ones cannot be triggered for the same event.

I am using (.on) event as per JQuery documentation to trigger the current and future elements. But still not responding.

$(".favorite-btn").on("click",function(){
    alert("Yes!");              
 });

Could you help ?

score 2 · Answer 1 · answered Feb 19 '15 at 06:01

2

You need to use event delegation for attaching events to dynamically added elements:

$("ul").on("click",'.favorite-btn',function(){
 alert("Yes!");              
});

answered Feb 19 '15 at 06:01

Milind Anantwar

score 1 · Accepted Answer · answered Feb 19 '15 at 06:01

You need to use event delegation for dynamically added DOM elements as shown below :-

$(document.body).on("click",".favorite-btn",function(){
    alert("Yes!");              
});

OR

$("ul#id").on("click",".favorite-btn",function(){
    alert("Yes!");              
});

2 Answers2