La llamada jQuery .load () no ejecuta JavaScript en el archivo HTML cargado

Esto parece ser un problema relacionado solo con Safari. He intentado 4 en Mac y 3 en Windows y todavía no tengo suerte.

Estoy tratando de cargar un archivo HTML externo y tener el JavaScript que está incrustado ejecutar.

El código que trato de usar es este:

$("#myBtn").click(function() { $("#myDiv").load("trackingCode.html"); }); 

trackingCode.html ve así (ahora es simple, pero se ampliará una vez / si lo hago funcionar):

   Tracking HTML File  alert("outside the jQuery ready"); $(function() { alert("inside the jQuery ready"); });      

Veo ambos mensajes de alerta en IE (6 y 7) y Firefox (2 y 3). Sin embargo, no puedo ver los mensajes en Safari (el último navegador en el que debo preocuparme – requisitos del proyecto – por favor, no guerras de llama).

¿Alguna idea sobre por qué Safari está ignorando el JavaScript en el archivo trackingCode.html ?

Eventualmente me gustaría poder pasar objetos de JavaScript a este archivo trackingCode.html para utilizarlo en la llamada jQuery ready, pero me gustaría asegurarme de que esto sea posible en todos los navegadores antes de ir por ese camino.

Está cargando una página HTML completa en su div, incluidas las tags html, head y body. ¿Qué sucede si haces la carga y solo tienes el script de apertura, el script de cierre y el código de JavaScript en el HTML que cargas?

Aquí está la página del controlador:

 < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    jQuery Load of Script       

Aquí está el contenido de trackingCode.html:

  

Esto funciona para mí en Safari 4.

Actualización: se agregó el espacio de nombres DOCTYPE y html para que coincida con el código en mi entorno de prueba. Probado con Firefox 3.6.13 y el código de ejemplo funciona.

 $("#images").load(location.href+" #images",function(){ $.getScript("js/productHelper.js"); }); 

Otra versión de la solución de John Pick justo antes, esto funciona bien para mí:

 jQuery.ajax({ .... success: function(data, textStatus, jqXHR) { jQuery(selecteur).html(jqXHR.responseText); var reponse = jQuery(jqXHR.responseText); var reponseScript = reponse.filter("script"); jQuery.each(reponseScript, function(idx, val) { eval(val.text); } ); } ... }); 

Me doy cuenta de que esta es una publicación un poco más antigua, pero para cualquiera que venga a esta página buscando una solución similar …

http://api.jquery.com/jQuery.getScript/

 jQuery.getScript( url, [ success(data, textStatus) ] ) 
  • url – Una cadena que contiene la URL a la que se envía la solicitud.

  • success(data, textStatus) – Una función de callback que se ejecuta si la solicitud tiene éxito.

 $.getScript('ajax/test.js', function() { alert('Load was performed.'); }); 

Esto no parece funcionar si está cargando el campo HTML en un elemento creado dinámicamente.

 $('body').append('
'); $('#loader').load('htmlwithscript.htm');

Veo Firebug DOM y no hay ningún nodo de script, solo el HTML y mi nodo CSS.

¿Alguien se ha encontrado con esto?

Ya casi lo tienes. Dile a jquery que quieres cargar solo el script:

 $("#myBtn").click(function() { $("#myDiv").load("trackingCode.html script"); }); 

Prueba con esto en trackingCode.html:

  

Intenté hacer un plugin jquery para la función de carga html. Por favor, consulte el siguiente enlace.

http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

Por favor sugiérame que lo mejore más.

Gracias, Mohan

Bueno, yo tenía el mismo problema que solo parecía ocurrir para Firefox, y no podía usar otro comando JQuery a excepción de .load () ya que estaba modificando el front-end en la existencia de archivos PHP …

De todos modos, después de usar el comando .load (), incrustó mi script de JQuery dentro del HTML externo que se estaba cargando, y pareció funcionar. No entiendo por qué el JS que cargué en la parte superior del documento principal no funcionó para el nuevo contenido, sin embargo …

Pude solucionar este problema cambiando $(document).ready() a window.onLoad() .

Me encontré con esto donde los scripts se cargarían una vez, pero las llamadas repetidas no ejecutarían el script.

Resultó ser un problema con el uso de .html () para mostrar un indicador de espera y luego encadenar .load () después de él.

 // Processes scripts as expected once per page load, but not for repeat calls $("#id").html("").load("page.html"); 

Cuando les hice llamadas separadas, mis scripts en línea se cargaron todas las veces como se esperaba.

 // Without chaining html and load together, scripts are processed as expected every time $("#id").html(""); $("#id").load("page.html"); 

Para futuras investigaciones, tenga en cuenta que hay dos versiones de .load ()

Una simple llamada .load () (sin un selector después de la url) es simplemente una abreviatura para llamar $ .ajax () con dataType: “html” y tomar los contenidos de retorno y llamar a .html () para poner esos contenidos en el DOM . Y la documentación para dataType: “html” indica claramente “las tags de script incluidas se evalúan cuando se insertan en el DOM”. http://api.jquery.com/jquery.ajax/ Así que .load () ejecuta oficialmente scripts en línea.

Una llamada .load () compleja tiene un selector como load (“page.html #content”). Cuando se utiliza de esta manera, jQuery filtra a propósito las tags de script como se discutió en artículos como este: https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 En este caso los scripts nunca corre, ni siquiera una vez.