Binding dynamically created elements in jQuery

Question

The following code is fairly self explanatory, but I am running in to an issue binding the click event to an element that has been created.

You can see at line 25 I

Answer 1

Using the .live() method it will work with any elements you add to the DOM after its loaded.

// Overlay click = trigger out
$('#overlay').live('click', function () {
    $('#overlay').fadeOut(1000);
    $('.modal').fadeOut(200);
});

Another way to do it would be to bind it to click when it is added (inside the click handler for $('a[name=modal]').

You should probably also change $('#overlay').fadeOut() to $(this).fadeOut().