El HTML adjunto que contiene javascript no se ejecuta, ¿cómo puedo hacer que se ejecute?

Question

Estoy agregando algunos HTML que contienen javascript.

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

y

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

Estas dos piezas de código están en la gran cantidad de HTML que estoy adjuntando.

Funcionan bien si ya están allí cuando se carga la página, pero no cuando estoy adjuntando.

¿Qué me sugieres que haga? ¿Se necesita algún tipo de solicitud para que el DOM vuelva a interpretar el JavaScript después del anexo o?

EDITAR:

Solo un poco más de información, estoy con este problema, porque estoy agregando algunas cosas con AJAX a la base de datos, y con éxito, estoy agregando el html a donde debe estar. Un poco de la misma manera que SO con los comentarios.

Edit2:

Incluso con toda la discusión al respecto, gracias por las respuestas, que funcionó.

Answer 1

Lo haría así:

Primero agregue atributos de ID a su html:

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

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

Luego, tenga Javascript que se ejecute en el evento onload de la página y se adjunte a los eventos que le interesan.

En PrototypeJS , puede tener este aspecto:

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

Usar algo como Prototype (o jQuery) es bueno porque se ocupa de la compatibilidad entre navegadores.

Answer 2

¿Estás agregando el HTML a través de AJAX? Si es así, tendrá que evaluar manualmente () el JavaScript que está devolviendo. Podrías envolver la respuesta en un div y hacer algo como esto:

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

Si está utilizando una biblioteca como prototipo, sería mucho más sencillo, ya que puede pasar la respuesta al método evalScripts ().

Answer 3

Agregue el HTML al documento y luego agregue programáticamente el evento onclick al objeto.

Esto está fuera de mi cabeza pero ... creo que puedes hacerlo de esta manera:

IE:

Object.onclick = someFuntion

FF:

Object.addEventListener('click', someFunction);

Answer 4

AJAX tiene algunas peculiaridades ... especialmente con IE. Ejemplo: no puede usar la propiedad innerHTML para insertar / actualizar nada en un elemento de tabla (en IE). Es mejor usar las funciones DOM para insertar / actualizar / eliminar nodos de elementos (o agregar controladores de eventos). Puede usar la función eval () mencionada para ejecutar javascript cargado dinámicamente que modifica el documento usando objetos DOM.

Answer 5

Usted debería usar addEventListener ('click', /*...*/) en lugar de configurar onclick en innerHTML o lo que sea.

IE llama a addEventListener para algo más, así que también tendrás que compensar eso.

(Editar: IE lo llama attachEvent () . Espero que esto sea de alguna utilidad.)