Anexado HTML que contém javascript não é executado, como posso fazê-lo funcionar?

Question

Estou anexando algumas contendo javascript HTML.

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

e

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

Estes dois pedaços de código estão no grande quantidade de HTML Eu estou anexando.

Eles trabalham muito bem se eles já estão lá quando a página é carregada, mas não quando eu estou anexando.

O que você me sugere fazer? É necessário algum pedido de classificação para o DOM para re-interpretar o JavaScript após o acréscimo ou?

EDIT:

Apenas alguns mais informações, eu estou com este problema, porque eu estou adicionando algumas coisas com AJAX ao banco de dados, e em caso de sucesso Estou anexando o html para onde ele precisa ser. Meio que da mesma forma que o mesmo acontece com os comentários.

Edit2:

Mesmo com toda a discussão sobre isso, obrigado pelas respostas, tenho que trabalhar.

Answer 1

Eu faria isso como este:

atributos primeiro adicionar id ao seu html:

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

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

Então, Javascript que é executado no evento de carregamento da página e atribui aos eventos que você está interessado.

Na PrototypeJS , ele pode ter esta aparência:

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
    }
  }
});

Usando algo como Prototype (ou jQuery) é bom porque ele cuida de compatibilidade cross-browser.

Answer 2

Você está anexando o HTML via AJAX? Se assim você terá que eval manualmente () do JavaScript que você está retornando. Você poderia envolver a resposta em um div e fazer algo como isto:

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

Se você estiver usando uma biblioteca como protótipo seria muito mais simples, como você pode passar a resposta às evalScripts () método.

Answer 3

Anexar o HTML para o documento, em seguida, programaticamente adicionar o evento onclick para o objeto.

Esta é em cima da minha cabeça, mas ... Eu acho que você pode fazê-lo desta maneira:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);

Answer 4

AJAX tem algumas peculiaridades ... especialmente com o IE. Exemplo: você não pode usar a propriedade innerHTML para inserir / atualizar qualquer coisa em um elemento de tabela (no IE). É melhor usar as funções DOM para inserir / atualizar / nós de elemento de exclusão (ou adicionar manipuladores de eventos). Você pode usar a função eval () mencionado para executar javascript dinamicamente carregado que modifica o documento usando objetos DOM.

Answer 5

Você deve estar usando addEventListener('click', /*...*/) em vez de definir onclick no innerHTML ou o que quer.

IE chama addEventListener algo totalmente diferente, então você vai ter que compensar isso também.

(Edit:.. IE chama de attachEvent() Espero que este seja de alguma utilidade)