jQuery: How to add event handler to dynamically added HTML elements?

Question

I have the following code:

$(document).ready(function({
    $(".click").click(function(){
        alert(' The Button Was Clicked !');
    });
}));

This works fine.
But If I add an element with the same class to the web page, as shown here:

$('#clicked').click(function(){
    $("#area").append("<button class='click'>Click me</button>");
});

Then the event handler I added before to the .click class won't work for this new element.
What's that best way to add event handlers to elements that were added dynamically ?

Answer 1

UPDATE

It's been a while since I posted this answer and things have changed by now:

$(document).on('click', '.click', function() {

});

Since jQuery 1.7+ the new .on() should be used and .live() is deprecated. The general rule of thumb is:

• Don't use .live() unless your jQuery version doesn't support .delegate().
• Don't use .delegate() unless your jQuery version doesn't support .on().

Also check out this benchmark to see the difference in performance and you will see why you should not use .live().

---

Below is my original answer:

use either delegate or live

$('.click').live('click', function(){
});

or

$('body').delegate('.click', 'click', function() {

});