Javascript not valid after dom manipulation

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

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

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

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

+1


source to share


6 answers


Have you entered an element with the same id (duplicate id)?



+1


source


how do you replace the html content of the result? I am assuming you have an event handler defined on page load, but you are overwriting the dom element with a new dom element that does not have an event handler. But I have to see some of the code or get more explanation before I know more :-)



+1


source


When you update the HTML with the new data, are you reattaching any event handlers that you had previously?

You may have replaced an element that previously had an event handler and now does not.

+1


source


This is a class, not a div. And they have the same class. The event handler is not part of the result. Javascript is at the bottom of the page, and the result is at the top. So the javascript is there. They are not replaceable.

0


source


I've seen similar behavior when manipulating the DOM with innerHTML zaps event handlers that were previously configured, albeit only when replacing the actual elements in which the handlers were attached. This is true for inline event handler attributes, as well as for "correct" Javascript event handlers.

The best way to test if this will happen is to add some debug statements to the function called when abn is pressed. If you're not using the debugger, just add some warnings (and then learn to use the JavaScript debugger).

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

      

The first click (which works) will give you a warning. If the second click (which doesn't work) misses the warning, then you know your DOM manipulations are removing event handlers.

If the second click still gives you a warning, then something else is happening. The most likely culprit is a Javascript thrown exception that stops executing. Download the debugger for your browser (Firefox / Firebug, IE / Visual Studio Express Web Developer, Safari / Drosera) and follow the execution path until an exception is thrown or you get to a part of your code where DOM manipulation should be done ... If you get to the end, check the contents of all variables as well as the current DOM content to determine why the expected DOM manipulation is not happening.

0


source


This is a class, not a div. And they have the same class. The event handler is not part of the result. Javascript is at the bottom of the page, and the result is at the top. So the javascript is there. They are not replaceable.

If you replace elements with new elements via .innerHTML, the JavaScript at the bottom of the page won't re-execute when you do so. If you add event handlers using JavaScript (level 2) and not as html attributes (level 0), then these handlers are only added when the user first visits the page. You must call this code every time you place new DOM elements on the page.

Of course, this answer may be completely inconclusive. We could tell if you gave us a sample code.

0


source







All Articles