jQuery .load() / .ajax() de ne pas l'exécution de javascript dans le code HTML renvoyé après annexé

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

À l'aide de .load():

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

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

À l'aide de $.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, j'aimerais exécuter ce code javascript dans un rappel après j'ai ajouté le code HTML, mais les variables sont des valeurs qui sont retournés à partir d'un contrôleur.

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

InformationsquelleAutor John | 2013-05-03
  1. 22

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

    Lors de l'appel .load() à l'aide d'une URL sans le suffixe sélecteur
    l'expression, le contenu est transmis à .html() avant de les scripts
    supprimé. Cela exécute le script blocs avant qu'ils ne soient jetés. Si
    .load() est appelée avec un sélecteur expression ajouté à l'URL,
    cependant, les scripts sont supprimés avant le DOM d'être mis à jour,
    et donc ne sont pas exécutées. Un exemple de deux cas peut être vu ci-dessous:

    Donc, Essayez

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

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

    Démo: Violon

    • Ce travail sera en jQuery v2.0.3?
    • oui il faut
    • $(result) enlèvent le script contenu. Avez-vous essayé?
    • Cela ne fonctionnera pas, comme $(suite) retournera un tableau, afin de trouver() ne fonctionnera pas. Il faut utiliser le filtre() afin d'obtenir l'élément du tableau.
    • attention cette solution, quelqu'un pourrait-commentaire un lien de script, de sorte que vous aurez besoin d'un autre fichier javascript. quelque chose comme XSS
    • Ne devrait-ce pas le travail alors? $('#new_content').load(url).not('#content > *').remove()

    InformationsquelleAutor Arun P Johny
  2. 4

    Si vous savez ce que le script que vous souhaitez exécuter, vous pouvez définir le script quelque part d'autre, hors de l'ajax réponse, et ensuite appeler la fonction de rappel. Ainsi, au lieu de:

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

    vous pouvez utiliser

    $('#new_content').load(url+' #content > *',function() {my_function(my_param);});
    • Fonctionne bien, et est plus sûr que accepté de répondre à
    InformationsquelleAutor Marc
  3. 2

    Comment à propos de ce code,

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

    ou vous pouvez simplement déplacer l'option JavaScript de votre contenu à autre fichier et le charger à l'aide de 

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

    ou simplement l'utiliser,

    eval(source);
    InformationsquelleAutor Chamika Sandamal