web-dev-qa-db-fra.com

Appel d'une fonction jQuery à l'intérieur d'un retour html à partir d'un appel AJAX

Je travaille sur une page Web qui utilise jQuery. J'ai un appel Ajax qui obtient des données du serveur et met à jour un div. À l'intérieur de ces données, il y a une fonction jQuery, mais la fonction n'est pas appelée après le chargement des données dans la page. J'ai déjà les fichiers js appropriés inclus dans la page.

Voici ce qui est renvoyé de l'appel Ajax et placé dans un div:

<script type="text/javascript">
    $(function() {
         $('input').myFunction('param');             
    }); 
</script>
<p> other html </p>

Comment faire exécuter le javascript renvoyé après l'insertion du code HTML dans la page?

(J'utilise Rails avec le plugin jRails)

javascriptjqueryajax
20
wusher

Si vous souhaitez une évaluation des balises JavaScript, avec un contenu html, vous devez définir l'option dataType de l'appel ajax sur "html":

$.ajax({
  type: "GET",
  url: "yourPage.htm",
  dataType: "html"
});

Ou dataType "script", si vous souhaitez charger et exécuter un fichier .js:

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

plus d'informations ici: Ajax/jQuery.ajax

27
CMS

J'ai eu un problème similaire où je voulais ajouter de petits sélecteurs de date jquery à quelques champs que je récupérais via ajax. voici ce que j'ai fait pour le contourner ... juste vite et sale. Au lieu de renvoyer tout ce bloc à partir de mon appel ajax:

<script type="text/javascript">
    $(function() {
         $('input').myFunction('param');                         
    }); 
</script>
<p> other html </p>

Je retournerais ceci (notez le séparateur composé | x |)

    $(function() {
         $('input').myFunction('param');                         
    }); 

|x|

<p> other html </p>

Ensuite, quand j'ai reçu les données via ajax, j'ai divisé la valeur de retour en 2 parties: le javascript à exécuter et le html à afficher:

 r = returnvalfromajax.split("|x|");       
 document.getElementById('whatever').innerHTML = r[1];  
 eval(r[0]);
7
wilcox00

En changeant

<script type="text/javascript">
...
</script>

À:

<script>
...
</script>

Correction du problème pour moi.

1
JimFing