I'm attaching an event listener to the window object. Then later in the script, document.write is being used. (I know, it's evil. I have no choice in the matter.) The problem is, the document.write wipes out my listeners. Is is possible to avoid that?

Here's a fiddle that illustrates the problem: /

I'm attaching an event listener to the window object. Then later in the script, document.write is being used. (I know, it's evil. I have no choice in the matter.) The problem is, the document.write wipes out my listeners. Is is possible to avoid that?

Here's a fiddle that illustrates the problem: http://jsfiddle/Fuhzu/

• javascript
• events
• document.write

• 2 No choice? Can't use div id=me me.innerHTML = "hah"? Or hah = document.createElement(span) me.appendChild(hah)? – Travis J Commented Dec 29, 2011 at 20:18
• No -- I have to work with some other existing code. It's possible that that could someday be changed, but not immediately. – sprugman Commented Dec 29, 2011 at 21:11

4 Answers 4

That is not possible. document.write unloads the current document, and creates a new one.

A demo to confirm: http://jsfiddle/Gk3cX/

window.test = document; //Cache document
document.write('<button onclick="alert(window.test===document)">CLick</button>');
// Clicking shows false! The document has changed!

Your only choice for overwriting the current document without unloading is innerHTML:

document.body.innerHTML = "Overwritten document's content, kept events.";

The work-around I've found is to simply re-attach the listeners after the document.write.

Update: Doh! That works in Chrome, but FF throws an error:

attempt to run pile-and-go script on a cleared scope

http://jsfiddle/NYyKH/

Maybe if I unattach the handler before document.writing....

Update 2: nope: http://jsfiddle/sprugman/KzNbX/1/

How about replacing document.write with your own function, that way it won't destroy the page.

Something like this:

document.write = function(str){
    document.body.innerHTML = str;
};

Or if you don't want to erase the whole page:

document.write = function(str){
    document.body.innerHTML += str;
};

DEMO: http://jsfiddle/Fuhzu/1/

i haven't tried this with document.write, but maybe it helps: http://api.jquery./live/

Attach an event handler for all elements which match the current selector, now and in the future