web-dev-qa-db-fra.com

jQuery .load () / .ajax () n'exécutant pas javascript dans le code HTML renvoyé après l'ajout

J'ai essayé d'utiliser .load() et $.ajax Pour obtenir du code HTML qui doit être ajouté à un conteneur, mais le Javascript dans le code HTML renvoyé n'est pas exécuté lorsque je l'ajoute à un élément .

Utilisation de .load():

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

J'ai également essayé de passer à un appel $ .ajax. J'ai ensuite extrait le script du code HTML renvoyé, après quoi je l'ai ajouté au conteneur, mais même problème, le JS n'est pas exécuté ou même ajouté dans ce cas, et si je comprends bien, j'essaye d'ajouter un <script> à un élément DOM comme celui-ci est mal vu?

En utilisant $.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();

});

Idéalement, je lancerais ce javascript dans un rappel après avoir ajouté le code HTML, mais les variables sont définies sur des valeurs renvoyées par un contrôleur.

Donc, en résumé, j'essaie d'obtenir du HTML qui contient JS qui doit être exécuté après que ce HTML a été ajouté, mais je n'ai pas eu de chance en utilisant .load() ou $.ajax() comme Le script dans le code HTML renvoyé disparaît lors de son ajout ou il ne s'exécute pas du tout.

javascriptjqueryajaxload
17
John

Lorsque load() est utilisé avec un sélecteur de fragment, l'élément de script sera supprimé avant l'ajout du fragment, ainsi le script ne sera pas exécuté .

Lors de l'appel de .load () à l'aide d'une URL sans expression de sélecteur suffixée, le contenu est transmis à .html () avant la suppression des scripts. Cela exécute les blocs de script avant leur suppression. Si .load () est appelé avec une expression de sélecteur ajoutée à l'URL, cependant, les scripts sont supprimés avant la mise à jour du DOM et ne sont donc pas exécutés. Un exemple des deux cas peut être vu ci-dessous:

Alors essayez

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

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

Démo: Fiddle

22
Arun P Johny

Si vous savez quel est le script que vous souhaitez exécuter, vous pouvez définir le script ailleurs, à partir de la réponse ajax, puis l'appeler à partir du rappel. Donc au lieu de:

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

vous pouvez utiliser

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

Que diriez-vous de ce code,

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

ou vous pouvez simplement déplacer votre contenu JavaScript dans un fichier séparé et le charger en utilisant

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

ou utilisez simplement,

eval(source);
2
Chamika Sandamal