John John -4 years ago 110
Ajax Question

Binding Javascript Event Handlers to an Ajax HTML Response?

Let's say I have the following HTML code

<div id="outer">
<div id="inner">Hello World</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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download