JQuery adding events to dynamically created elements

Question

I know this has been asked before but I can't seem to figure out what I'm doing wrong.

I am just trying to create some dynamic elements and then attach an event to them using only JQuery. The buttons should launch an alert.

http://jsfiddle.net/XGb7w/1/

$(function(){ 
 $('#add').on("click",function(){addItem()});
 function addItem() {
 var listItem = '<li>' + '<button class="checkBtn"></button>' + '<button class="crossBtn"></button>' + '</li>';
 $('ul').append(listItem);
 }
 $('.crossBtn').on("click", function() {
 alert() // Doesn't alert why not?
 });
 $('.checkBtn').on("click", function() {
 alert();// Doesn't alert why not?
 })
});

Thank you.

• Huangism: Here you go jsfiddle.net/XGb7w/2
• Hogan: You had 3 ;s missing in your code. You should be careful, this will probably cause problems in the future.
• William: I just was being reckless getting the jsfiddle up. Sorry

Answer 1

You can do this if you set the on handler at the document level.

http://jsfiddle.net/fbNY9/

$(function () {
 $('#add').on("click", function () {
 addItem();
 });
 function addItem() {
 var listItem = '<li>' + '<button class="checkBtn" />' + '<button class="crossBtn" />' + '</li>';
 $('ul').append(listItem);
 }
 $(document).on("click",".crossBtn", function () {
 alert(); // Doesn't alert why not?
 });
 $(document).on("click",'.checkBtn', function () {
 alert(); // Doesn't alert why not?
 });
});

• Jeff: This is the proper way of handling the issue, it's called event delegation. You attach the event higher in the DOM and listen for the event on the proper target.