2012-05-23 17 views
5

Tengo una aplicación web que esencialmente tiene vistas de encabezado, pie de página y cuerpo. Estoy trabajando en ajaxificar el sitio web, utilizando la biblioteca history.js y el pushstate HTML5, pero uno de los problemas que estoy experimentando es que JavaScript incrustado se ejecuta cuando el javascript se inserta en el DOM.Ejecutar javascript inyectado dinámicamente en DOM cargado a través de AJAX (intento de ajaxificar el sitio web con history.js)

Casi toda mi Javascript está envuelto en jQuery (function() {...}) (documento en el cargador-ready)

¿Alguien sabe una buena estrategia para hacer frente a esto? ¡Gracias!

Respuesta

7

Si te entiendo, tu "página" es solo un contenedor para HTML que estás cargando dinámicamente. Dentro de ese HTML tiene bloques de scripts de JavaScript que actualmente no se ejecutan. ¿Es eso correcto? ¿Están en scripts de página o enlaces a nuevos archivos de script?

En cualquier caso, creo que esto responda a su pregunta: How do you execute a dynamically loaded JavaScript block?

Mis propios pensamientos:

A menos que su envase es muy genérico, y por lo tanto no puede saber qué JavaScript que pueda necesitar, lo más sencillo es probablemente para adjuntar manualmente todo su JavaScript a la página del contenedor, para que se cargue con el contenedor, tal vez minificado y concatenado en un único archivo.

Si necesita cargar sus scripts dinámicamente, pero usted sabe cuáles son, puede hacerlo con jQuery usando .getScript() o .ajax(). Pensé que esta página explicaba muy bien las cosas, http://www.electrictoolbox.com/jquery-dynamically-load-javascript-file/.

Del mismo modo, si no sabe qué scripts necesita hasta después de tomar su bloque html, probablemente pueda analizar el html para enlaces de scripts y adjuntarlos manualmente a través de nuevos elementos de script agregados a la página. Como ejemplo, el siguiente script agrega jQuery a la página si aún no existe.

(function() { 

    if (typeof(jQuery) == "undefined") { 
     var headID = document.getElementsByTagName("head")[0];   
     var newScript = document.createElement('script'); 
     newScript.type = 'text/javascript'; 
     newScript.id = 'myjQuery'; 
     newScript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'; 
     headID.appendChild(newScript); 
    } 

    window.addEventListener('load', function (e) { 

     //make jQuery calls here. 

    }, false); 

})(); 
+0

Creo que acabo de encontrar una buena respuesta: http://api.jquery.com/jQuery.ajax/ tipoDatos propiedad config: "" html" : Devuelve HTML como texto sin formato, las etiquetas de script incluidas se evalúan cuando en el DOM ". Voy a probarlo, pero esto suena exactamente como lo que necesito :) –

+0

Eso suena bien y fácil. ¡Buena suerte! – jatrim

-1

uso .on, no lo va a explicar al comportamiento de esa función, pero en pocas palabras:

trabajo a través de elementos de burbujeo en el DOM, por ejemplo, que ates "onclick" a un div que puede fijar a algunos o todos sus hijos tienen un comportamiento x

Cuestiones relacionadas