jQuery - Register an element in the DOM after setting html()

Question

I have a div, where I set the innerHTML after a button has been clicked:

$('#headerDiv').html('Welcome [<a href=\'javascript:void(0);\' id=\'logout_button\'>Logout</a>]');

However, the new element logout_button isn't registered in the DOM, so I can't capture click events using the traditional $('#logout_button').click().

Is it possible to register logout_button in the DOM just after it's been set with the html() method?

Thanks!

Answer 1

Delegate the event

$('#headerDiv').on('click', '#logout_button', function() {
     // Your code
});

This will make sure the event is attached to the dynamically added element by the concept of event bubbling.

Answer 2

If delegation isn't your cup of tea, you can bind your click handler to the button before attaching the button. Do that by creating DOM elements and appending them:

var btn = $('<a />').text('Logout').attr({
        "href": "javascript:void(0);",
        "id": "logout_button"
    }).click(function (e) {
        // do logout stuff
        e.preventDefault();
        return false;
    });
$('#headerDiv').append(btn);

This has the added bonus of ensuring you are adding valid elements to the DOM.