Question

I’m using AHAH to load a piece of HTML after the document is ready. There’s a button in that chunk of HTML I would like to apply a .click event to. I’m having trouble applying that event after the HTML is loaded. The call back is very generic and is used by other parts of the page so I would prefer not to fill it up with specific code. Any ideas?

Answer 1

As others are pointing out, you want to consider using $.live(), which will handle events for all pre-existing DOM elements, as well as any added later down the road. For instance, suppose the block of HTML you’re loading in has a set of links containing the classname “foo,” all of which should respond in a specific way when clicked:

$(".foo").click(function(){
  // I don't do anything to dynamicall-added elements
});

This example will only apply to pre-existing items containing the classname “foo.” To handle current, and future elements, we should do the following:

$(".foo").live("click", function(){
  // I handle both present, and future elements
});

Now anything added at any time will be handled by this if it contains the classname “foo”. This works great for situations like yours where large blocks of html will be inserted into the DOM later in the page’s lifecycle.