Secuencias de comandos eliminadas con jQuery .load

Question

No creo que esta pregunta haya sido planteada antes, al menos no de la manera en que la necesito. Estoy usando la función .load de jQuery. Tengo un problema al cargar solo fragmentos de página.

Al utilizar algo como:

$('#content').load('loadTest.html'); 

Todos los scripts de carga loadTest.html bien. Sin embargo, cuando los fragmentos carga de la página como esta:

$('#content').load('loadTest.html #content'); 

los guiones son despojados a cabo antes de que el DOM está actualizando

Esto está claramente documentado en http://api.jquery.com/load/ que dice:

Nota:Cuando llamando a .load() utilizando una URL sin una expresión de selector con sufijo, el contenido se pasa a .html() antes de que se eliminen los scripts. Esto ejecuta los bloques de script antes de que se descarten. Sin embargo, si se llama a .load() con una expresión de selector adjuntada a la URL, las secuencias de comandos se eliminan antes de que se actualice el DOM, razón por la cual nunca se ejecutan. Un ejemplo de ambos casos se puede ver a continuación:

Entiendo que podría cargar externamente la secuencia de comandos que se puede utilizar en cualquier lugar, pero el hecho es que estoy usando un sistema ajax en toda la página donde todo está cargado dinamicamente. Así que realmente no tengo ganas de tener todas las funciones de JavaScript que escribiré alguna vez (100 en este momento) en archivos externos. Especialmente porque algunas de estas funciones de javascript están hechas de valores cargados desde una base de datos que no puedo contabilizar en un archivo .js.

¿Hay alguna solución para los scripts que se eliminan antes de actualizar el DOM? ¿Podría de alguna manera cargarlos manualmente? Cualquier pequeño ejemplo sería útil para mí.

Answer 1

Como usted dijo. jQuery extrae ese elemento antes de ejecutar solo ese bloque.

Puede modificar la salida para que el servidor devuelva los datos en el formato que necesita o simplemente escriba los suyos. Extraería los elementos que necesita y los enviará al DOM.

no probado, pero sería lo largo de las líneas de este ..

$('#content').load('loadTest.html #content,script'); 

De esta memoria más válida ..

$.get('loadTest.html',function(r){ 
    var els = $(r).find('#content,script'); 
    $('#content').html(els); 
}); 

Answer 2

Después de su comentario Creo que podría estar interesado en algo así como js/css lazyload. Condicionalmente carga scripts, lo estoy usando en algunos sitios más pequeños para cargar solo scripts y CSS cuando los necesito en diferentes subpáginas o interacción del usuario.

Se carga una vez en la cabeza:

<script src="js/lazyload-min.js" type="text/javascript"></script> 

Y, puede cargar los scripts siempre que los necesite dinámicamente, uno de los muchos ejemplos:

// Load a single JavaScript file and execute a callback when it finishes. 
LazyLoad.js('http://example.com/foo.js', function() { 
    alert('foo.js has been loaded'); 
}); 

Obras para archivos CSS, también .

Esto podría ser útil en su caso, sin embargo, también podría cambiar su lógica de carga. En cualquier caso, creo que normalmente deberías tener múltiples puntos finales AJAX en tu servidor que solo devolverán los datos que solicites. De lo contrario, las cosas pueden ser específicas e incluso engañosas.

Así que más un comentario que una respuesta real.