web-dev-qa-db-fra.com

Recharger le fichier javascript après un AJAX demande

Après la demande, les nouveaux éléments créés ne sont pas reconnus par les gestionnaires d'événements de mon code jQuery.

Existe-t-il un moyen de recharger le fichier pour réenregistrer ces événements?

javascriptjqueryajax
13
Michaël

Je suppose que vous voulez dire que les événements que vous avez enregistrés pour des éléments remplacés par les résultats de vos demandes ajax ne sont pas déclenchés?

Utilisez .live() (voir http://api.jquery.com/live/ ) pour enregistrer les événements en fonction des éléments que le sélecteur correspond (y compris les nouveaux éléments DOM créés à partir des résultats de ajax), plutôt que les résultats du sélecteur lors de la première gestion des gestionnaires d'événements, qui seront détruits lors de leur remplacement.

par exemple . remplacer

$('div.someClass').click(function(e){
    //do stuff
});

avec

$('div.someClass').live('click', function(e){
    //do stuff
});

Important:

Bien que j'ai recommandé d'utiliser .live() ceci est pour la clarté car sa syntaxe est similaire à .bind(), vous devriez utiliser .on() si possible. Voir les liens dans le commentaire de @ jbabey pour des informations importantes.

20
StuperUser

Cette question concernait le gestionnaire d'événements binding sur un élément DOM créé après le chargement de la page. Par exemple, si après une requête ajax, vous créez un nouveau bloc <div> et souhaitez capturer l'événement onClick.

//This will work for element that are present at the page loading
$('div.someClass').click(function(e){
    //do stuff
});

// This will work for dynamically created element but is deprecated since jquery 1.7
$('div.someClass').live('click', function(e){
    //do stuff
});

// This will work for dynamically created element
$('body').on('click', 'div.someClass', function(e){
    //do stuff
});

Vous trouverez la documentation ici: http://api.jquery.com/on/

6
Michaël

Ce code fonctionne parfaitement pour moi ..

$("head script").each(function(){
            var oldScript = this.getAttribute("src");
            $(this).remove();
            var newScript;
            newScript = document.createElement('script');
            newScript.type = 'text/javascript';
            newScript.src = oldScript;
            document.getElementsByTagName("head")[0].appendChild(newScript);
        });

Il supprime l'ancienne balise de script et en crée une nouvelle avec le même src (en le rechargeant).

3
Omar Abou Elmagd

Vous pouvez également attacher les cliqueurs au corps afin qu'ils ne soient jamais détruits.

$('body').on('click', 'a', function(event) {
  event.preventDefault();
  event.stopPropagation();
  // some stuff
})
1
Dan185

Pour augmenter les performances du site Web et réduire la taille totale du fichier, vous pouvez envisager de charger le fichier JavaSript (.js) lorsque cela est nécessaire. Dans jQuery, vous pouvez utiliser la fonction $ .getScript pour charger un fichier JavaScript au moment de l'exécution ou à la demande.

Par exemple,

$("#load").click(function(){
    $.getScript('helloworld.js', function() {
        $("#content").html('Javascript is loaded successful!');
    });
});

quand un bouton avec un identifiant de «chargement» est cliqué, le fichier JavaScript «helloworld.js» sera chargé dynamiquement.

Essayez vous-même Dans cet exemple, lorsque vous cliquez sur le bouton de chargement, il chargera le «js-example/helloworld.js» au moment de l'exécution, qui contient une fonction «sayhello ()».

<html>
<head>

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

</head>
<body>
  <h1>Load Javascript dynamically with jQuery</h1>

<div id="content"></div>
<br/>

<button id="load">Load JavaScript</button>
<button id="sayHello">Say Hello</button>

<script type="text/javascript">

$("#load").click(function(){
  $.getScript('js-example/helloworld.js', function() {
     $("#content").html('
          Javascript is loaded successful! sayHello() function is loaded!
     ');
  });
});

$("#sayHello").click(function(){
  sayHello();
});

</script>
</body>
</html>
1
Abhijit Jagtap

Que voulez-vous dire par non reconnu par jQuery?

jQuery parcourt le DOM chaque fois que vous faites une demande, ils doivent donc être visibles. Les événements attachés ne seront cependant PAS.

Qu'est-ce qui n'est pas visible exactement?

P.S .: Recharger JavaScript est possible, mais fortement déconseillé!

0
Tony Bogdanov

Dans votre rappel de demande, appelez une fonction qui agit sur vos blocs nouvellement ajoutés ou créés.

$.ajax({
   success: function(data) {
        $('body').append(data);
        //do your javascript here to act on new blocks
   }
});
0
orolo

Vous pouvez essayer le pluginloadScript pour charger le fichier javascript.

forexample 
$("#load").click(function(){
    $.loadScript('path/example.js');
});

or 
$.ajax({
   success: function(data) {
        $.loadScript('path/example.js');
   }
});

http://marcbuils.github.io/jquery.loadscript/

0
Arun jai
  var scripts = document.getElementsByTagName("script");
  for (var i=0;i<scripts.length;i++) {
    if (scripts[i].src)
      if(scripts[i].src.indexOf('nameofyourfile')  > -1 )
        var yourfile = scripts[i].src;
  }
  jQuery.get(yourfile, function(data){
  if(data){
     try {
      eval(data);
     } catch (e) {
     alert(e.message);
    }
 }
    });
0
bnassim

moyen simple de résoudre ce problème

$(document).ready(function(){

$('body').on('click','.someClass',function(){

//do your javascript here..

});
});
0
user3176429