CODEWITHSUNDEEP
javascriptjqueryjquery-events
Jane Panda
Jane Panda

Reputation: 1671

JavaScript handling events after the page loads

When I'm writing some JavaScript I have a set of interface buttons that have their events assigned when the page is loaded. My problem is anything created dynamically wont receive these events.

For example, I'm making a URL checker, whose job is to make sure that any link that goes to another domain brings up an exit interface letting the user know they are leaving. Any links created after the page is loaded, post ajax (no pun intended) or whatever wont have that event naturally as those that existed when the page loaded.

In practice, what's the best way to ensure any newly created items get these sorts of global events?

I like to use jQuery, but this is really a conceptual question.

Should I create a function to re-apply any global link effects, or is there a smarter way besides doing it piecemeal?

Upvotes: 0

Views: 753

Answers (4)

simshaun
simshaun

Reputation: 21476

If using jQuery, you can use the .live() method.

Normally when binding an event handler, the event handler is bound to a specific set of elements. Elements added in the future do not receive the event handler unless it is re-bound.

jQuery's .live() method works around this by binding its own special event handler to the root of the DOM tree (relying on event bubbling). When you click on an element, if it has no event handler directly attached, the event bubbles up the DOM tree. jQuery's special event handler catches the event, looks at its target and executes any user-specified event handlers that were assigned to the target through .live().

Upvotes: 3

Marcus Whybrow
Marcus Whybrow

Reputation: 20008

Yes put simply, where you might have had this before:

$('selector').click(function () {});

Replace it with:

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

Upvotes: 0

brettkelly
brettkelly

Reputation: 28245

You can use the .live() jQuery method to add listeners to elements that are created after the page is finished loading. Using your example of the exit link (if I understand it correctly):

$(function(){
    $('a.exitLink').live('click',function(event){ /* do stuff when a link of class exitLink is clicked */);
});

This will respond to the click event on any link of class exitLink, regardless of when it was created (before or after onload fires).

Hope this helps :)

Upvotes: 0

Bobby D
Bobby D

Reputation: 2159

Look into jQuery's live function. It will allow you to attach to events when control are created during load, and whenever new ones are created. There is a performance penalty, but it is not significant unless you are loading a lot of elements.

Upvotes: 0

Related Questions