Javascript invalidated after dom manipulation

Question

My page has two components that depend on Javascript. On the left hand side, there is a attribute base navigation (abn). And the right hand side is the Result of the abn.

There is an event handler for abn and an event handler for the result (both are on clicks) Whenever the user clicks on the abn, I do an ajax call which returns a json object where the html result is a value of one of the key/value pair. The html is being inserted into the result component.

The event handler for the result of the page works fine on a page refresh. It stops working when I insert the html content into the result slot after the ajax call. I have verified that the result has all the divs and class that my javascript depends on.

I think when I replaced the html content, the javascript handler just stop working. Can someone explain why this is happening and how I can solve this?

Answer 1

Did you insert an element with the same id (duplicate id)?

Answer 2

how are you replacing the html content of the result? my guess is that you have the event handler defined when the page loads, but you are overwriting the dom element with a new dom element which does not have the event handler. But I'd have to see some of the code or get more of an explanation before I know more :-)

Answer 3

They are class, not div. And they have the same class. The event handler is not part of the result. The javascript is at the bottom of the page while the Result is at the top. So the javascript is sitll there. They are not being replaced.

Answer 4

When you update the HTML with new data do you re-attach any event handlers that you had previously?

It's possible that you've replaced the element which previously had an event handler, and now does not.

Answer 5

I've seen similar behavior where manipulating the DOM with innerHTML zaps event handlers that had been previously setup, although only when you replace the actual elements that had the handlers attached. This is true for inline event handler attributes, as well as "proper" event handlers hooked up via Javascript.

The best way to test if this is happening would be to add some debug statements to the function that's called when you click on the abn. If you're not using a debugger, just add some alerts (and then look into using a JavaScript debugger)

function iAmCalledWhenSomeoneClicksOnAbn(){
    alert("I was called, w00t!");
    //...rest of function
}

The first click (that works) will give you an alert. If the second click (that doesn't work) skips the alert, you know that your DOM manipulations are removing your event handlers.

If the second click still gives you the alert, there's something else going on. The most likely culprit is an un-handled Javascript exception that's halting execution. Download a debugger for your browser (Firefox/Firebug, IE/Visual Studio Express Web Developer, Safari/Drosera) and following the execution path until the exception is thrown, or you get to the portion of your code where the DOM manipulation should happen. If you reach the later, inspect the contents of all the variables, as well as the current contents of the DOM to determine why the expected DOM manipulation isn't happening.

Answer 6

They are class, not div. And they have the same class. The event handler is not part of the result. The javascript is at the bottom of the page while the Result is at the top. So the javascript is sitll there. They are not being replaced.

If you are replacing elements with new elements via .innerHTML, the JavaScript at the bottom of the page will not be re-executed when you do so. If you are adding event handlers using JavaScript (Level 2) rather than as html attributes (Level 0) then those handlers are only added when the user first visits the page. You need to call that code every time you place the new DOM elements on the page.

Of course, this answer may be totally off the mark. We could tell if you gave us a code sample.