Events on DOM elements not yet created, in Javascript?

Question

I have a Javascript module the following Javascript:

EntryController = function$entry(args) {

    MainView();

    $('#target').click(function() {
      alert('Handler called!');
    });

}

MainView() has a callback that creates the #target button. Because of the callback the code will pick up and run through the rest of the code $('#target') ... before #target is created. If this is the case the event is never hooked up to the #target. If I put a breakpoint at $('#target') that'll give the callback enough time to return and build the #target, when I press play everything works as expected.

What's the best way to deal with this? I would like all events to take place in the controller so it can choose which view to send it to.

I was thinking about placing the entire $('#target').click ... inside MainView() and instead of alert('Handler called!'); I'd put a references to EntryController.TargetEventRaise(), but that started to look a bit like steady code. What's the best way to approach this?

Answer 1

You're looking for jQuery's live event handlers, which will handle an event on every element that matches the selector, no matter when the element was created.

For example:

$('#target').live('click', function() {
    alert('Handler called!');
});

Alternatively, you could make the MainView function itself take a callback, and add the handler in the callback. You could then call the callback in MainView inside of its callback.