Binding Javascript Event Handlers to a an Ajax HTML Response?

Question

Let's say I have the following HTML code

<div id="outer">
<div id="inner">Hello World</div>
</div>

At the end of my HTML page, I use javascript to attach event handlers like so,

document.getElementById('inner').onclick = function() {alert(this.innerHTML);}
document.getElementById('outer').onclick = function() {
/* An Ajax Call where the response, which will be a string of HTML content, then goes into document.getElementById('outer').innerHTML */

document.getElementById('inner').onclick = function() {alert(this.innerHTML);}

}

In the above code, I am expecting <div id="inner">Hello World 2</div> to come back which requires me to re-attach the onclick event handler. This makes sense because the new response coming back is just a string, and I have to tell the browser that after converting to DOM, i also need some event handlers

So my question is, is there a better way to manage event handlers on AJAX response that contains HTML content? I could use inline javascript within the html response, but then it prevents me from achieving non-intrusive javascript. So is there a way to achieve non-intrusive javascript and an efficient way to "maintain" event handlers of ajax html responses?

Answer 1

You can use something like jQuery live. It lets you bind an event handler to elements that match a selector now and in the future.

Answer 2

Ben Nolan made a nice framework once called "Behaviour". He has since abandoned it, but the idea is still sound. The idea was to put your event handlers into "sheets" (just javascript objects) under properties named using CSS selectors.

You could use an object such as this:

{
    '#inner': function() { ... }
}

A general function could iterate the properties of such an object when necessary to reapply event handlers.

I have an old copy of Behaviour stored here: http://www.kruse-net.dk/javascript/lib/behaviour-1.2.js that you're free to draw inspiration from or use.