Binding Javascript Event Handlers to 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?

I think if you used a javascript framework like jQuery, they have this sorted out via the .live() functionality, unless you want to roll up one of your own — Sunny
– Sunny, Commented Apr 25, 2010 at 14:19

Matthew Flaschen · Accepted Answer · 2010-04-25 14:18:29Z

2

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.

answered Apr 25, 2010 at 14:18

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KevinManx Over a year ago

Be aware that .live() is deprecated as of 1.7

Jakob Kruse · Accepted Answer · 2010-04-25 14:24:07Z

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.

answered Apr 25, 2010 at 14:24

Jakob Kruse

2,51318 silver badges18 bronze badges

Collectives™ on Stack Overflow

Binding Javascript Event Handlers to an Ajax HTML Response?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related