Appended HTML that contains javascript doesn't run, how can I make it run?

Question

I'm appending some HTML containing javascript.

<td onclick="toggleDay('+data+',this,\'tue\');">T</td>

and

<img src="img/cross.png" onclick="deleteAlarm('+data+');">

These two pieces of code are in the big amount of HTML I'm appending.

They work fine if they are already there when the page loads but not when I'm appending.

What do you suggest me to do? Is it needed some sort request for the DOM to re-interpret the JavaScript after the append or?

EDIT:

Just some more info, I'm with this problem, because I'm adding some stuff with AJAX to the database, and on success I'm appending the html to where it needs to be. Kinda the same way SO does with the comments.

Edit2:

Even with all the discussion about it, thanks for the answers, got it working.

Answer 1

I'd do it like this:

First add id attributes to your html:

<td id="toggleDayCell">T</td>

<img src="img/cross.png" id="crossImg">

Then have Javascript that runs on the onload event of the page and attaches to the events you're interested in.

In PrototypeJS, it might look like this:

Event.observe(window, 'load', function(){
  if( $('toggleDayCell') ) {
    Event.observe( $('toggleDayCell'), 'click', function(event){
      //do stuff here
    }
  }

  if( $('crossImg') ) {
    Event.observe( $('crossImg'), 'click', function(event) {
       //do stuff here
    }
  }
});

Using something like Prototype (or jQuery) is nice because it takes care of cross-browser compatibility.

Answer 2

Are you appending the HTML via AJAX? If so you will have to manually eval() the JavaScript that you are returning. You could wrap the response in a div and do something like this:

wrapper.getElementsByTagName("script")
// for script in wrapper...
eval(script.innerHTML)

If you are using a library like prototype it would be much simpler as you can pass the response to the evalScripts() method.

Answer 3

Append the HTML to the document then programatically add the onclick event to the object.

This is off the top of my head but... I think you can do it this way:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);

Answer 4

AJAX has some quirks... especially with IE. Example: you cannot use the innerHTML property to insert/update anything in a table element (in IE). It's better to use the DOM functions to insert/update/delete element nodes (or add event handlers). You can use the eval() function mentioned to run dynamically loaded javascript that modifies the document using DOM objects.

Answer 5

You should be using addEventListener('click', /*...*/) instead of setting onclick in innerHTML or whatever.

IE calls addEventListener something else entirely, so you'll have to compensate for that too.

(Edit: IE calls it attachEvent(). Hope this is of some use.)