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

$('#headerDiv').html('Wele [<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!

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

$('#headerDiv').html('Wele [<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!

• javascript
• jquery

Share Improve this question Follow asked Jun 6, 2013 at 23:51 BrettBrett 12k3535 gold badges136136 silver badges222222 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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.