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.