example - jQuery.load()/.ajax() no ejecuta javascript en HTML devuelto después de anexado

jquery load

Question

He intentado usar .load() y $.ajax para obtener algo de HTML que se debe adjuntar a un contenedor, pero el Javascript dentro del HTML devuelto no se está ejecutando cuando lo agrego a un elemento.

Utilizando .load() :

$(''#new_content'').load(url+'' #content > *'',function() {
    alert(''returned'');
});

También he intentado cambiar a una llamada $ .ajax. Luego extraje el script del HTML devuelto, después de lo cual lo agregué al contenedor, pero el mismo problema, el JS no se está ejecutando o incluso se agregó en este caso, y como lo entiendo, tratando de agregar un <script> a ¿Un elemento DOM como este está mal visto?

Utilizando $.ajax :

$.ajax({ url: url }).done(function(response) {
    var source  = $("<div>").html(response).find(''#overview_script'').html();
    var content = $("<div>").html(response).find(''#content'').html();

    $(''#new_content'').html(content);
    $(''<script>'').appendTo(''#new_content'').text(source).html();

});

Lo ideal sería ejecutar este javascript en una devolución de llamada después de haber agregado el HTML, pero las variables se configuran a los valores que se devuelven desde un controlador.

Así que en resumen, estoy tratando de obtener algún HTML que contenga JS que deba ejecutarse después de que se haya agregado ese HTML, pero no he tenido la suerte de usar .load() o $.ajax() como el script en el HTML devuelto. o desaparece al anexarlo, o no se ejecuta en absoluto.

Answer 1

¿Qué tal este código,

$(''#new_content'').append($(''<script>'').html(source));

o simplemente puede mover su contenido de JavaScript a un archivo separado y cargarlo usando

$.getScript("url to js file");

o simplemente usar,

eval(source); 

Answer 2

Cuando se usa load() con un selector de fragmentos, el elemento del script se eliminará antes de agregar el fragmento, por lo que el plnkr.co/edit/Hj0cyTUV44BPrxiOvPpW?p=preview .

Cuando se llama 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 sean descartados. Sin embargo, si se llama a .load () con una expresión de selector adjunta a la URL, los scripts se eliminan antes de que se actualice el DOM y, por lo tanto, no se ejecutan. Un ejemplo de ambos casos se puede ver a continuación:

Así que prueba

$.get(''partial.html'', function(result){
    $result = $(result);

    $result.find(''#content'').appendTo(''#new_content'');
    $result.find(''script'').appendTo(''#new_content'');
}, ''html'');

Demostración: plnkr.co/edit/Hj0cyTUV44BPrxiOvPpW?p=preview

Answer 3

Si sabe cuál es la secuencia de comandos que desea ejecutar, puede definir la secuencia de comandos en otro lugar, fuera de la respuesta ajax, y luego llamarla desde la devolución de llamada. Así que en lugar de:

$(''#new_content'').load(url+'' #content > *'',function() {alert(''returned'');});

puedes usar

$(''#new_content'').load(url+'' #content > *'',function() {my_function(my_param);});