CODEWITHSUNDEEP
javascriptdom
David
David

Reputation:

Javascript invalidated after dom manipulation

My page has two components that depend on JavaScript. On the left-hand side, there is attribute-based 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?

Upvotes: 1

Views: 830

Answers (6)

Benry
Benry

Reputation: 5298

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.

Upvotes: 0

Alana Storm
Alana Storm

Reputation: 166086

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.

Upvotes: 0

Zack The Human
Zack The Human

Reputation: 8481

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.

Upvotes: 1

David
David

Reputation:

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.

Upvotes: 0

Joel Martinez
Joel Martinez

Reputation: 47759

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 :-)

Upvotes: 1

pkario
pkario

Reputation: 2220

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

Upvotes: 1

Related Questions