2011-04-29 8 views
1

Il y a un div qui change souvent son innerHTML par ajax. Une fois la page chargée, jQuery function() fonctionne mais lorsque innerHTML change par ajax, certaines fonctionnalités ne fonctionnent pas. J'ai vérifié le code using firebug et essaye de l'expliquer en bref. **jQuery fn() ne se charge pas/fonctionne?

Je pense que DOM charge le dossier de js seulement quand la page a chargé la première fois et si ajax modifie innerHTML alors la fonction n'est pas invoquée d'une certaine manière. Que dites-vous? quelle pourrait être la solution selon vous? page HTML

<body> 
    <div class="_div_change"> dynamically class add by jQuery function() 

     here contenet is added by ajax functionality 
    </div> 

    <script type="text/javascript"> 
      $(function(){ 
      $('._div_change').addClass('.div_class'); 
       }); 
    </script> 
    </body> 

Loading first time & class is added by fn() |only div innerHTML modified by ajax *** 
              | 
    <div class="_div_change div_class">  | <div class="_div_change"> 
     innerHTML elements added successfully| innerHTML elements altered successfully 
    </div>         | </div>  

Répondre

1

Votre script est incomplet, mais en supposant qu'il ressemble à ceci:

$(function(){ 
     $('._div_change').addClass('.div_class'); 
}); 

... alors ce que vous faites, il est révélateur que jQuery pour exécuter fonction une fois lorsque le DOM est initialement chargé (appel $() avec une fonction est un raccourci vers jQuery.ready). Si vous voulez relancer cette fonction lorsque vous mettez à jour le contenu de div via ajax, vous devrez le faire dans votre gestionnaire success lors de l'appel ajax.

Vous pouvez attribuer à jQuery une fonction qu'il appellera à chaque fois qu'un appel ajax est terminé, via jQuery.ajaxSuccess, ce qui peut être utile.

+0

Merci pour décrire TJ la logique. édité le script. – Bibhaw

1

Oui, le code s'exécute une seule fois lors du chargement de la page.

Le $(function(){...}); est la forme abrégée de l'événement prêt pour le document: $(document).ready(function(){...});.

Si vous modifiez le DOM et souhaitez appliquer le code jQuery aux nouveaux éléments, vous devez réexécuter le code avec l'élément parent comme portée. Créer une fonction avec le code et un paramètre de portée:

function updateElements(scope) { 
    $('._div_change', scope).addClass('.div_class'); 
} 

Maintenant, vous pouvez exécuter la fonction de l'événement prêt avec le document cadre:

$(function(){ 
    updateElements(document); 
}); 

Lorsque vous avez chargé du nouveau contenu dans un des éléments , permet de dire avec id="asdf", vous pouvez exécuter à nouveau la fonction avec cet élément comme la portée, et il appliquera les modifications que le contenu nouvellement ajouté:

updateElements($('#asdf')); 
+0

oh je vois. Merci beaucoup d'avoir été clair. apprécié! – Bibhaw

+0

vous rock homme :). ça marche maintenant. J'étais coincé depuis deux jours: P. Merci beaucoup – Bibhaw