web-dev-qa-db-fra.com

Comment appeler une fonction après qu'une div est prête?

J'ai les éléments suivants dans mon fichier javascript:

var divId = "divIDer";

jQuery(divId).ready(function() {
  createGrid();  //Adds a grid to the html
});

Le html ressemble à quelque chose comme:

<div id="divIDer"><div>

Mais parfois, ma fonction createGrid () est appelée avant que mon divIder ne soit réellement chargé sur la page. Ainsi, lorsque j'essaie de restituer ma grille, elle ne trouve pas la div à désigner et ne rend jamais. Comment puis-je appeler une fonction une fois que ma div est prête à être utilisée?

Modifier:

Je charge dans la div en utilisant Extjs:

var tpl = new Ext.XTemplate(
'<div id="{divId}"></div>');

tpl.apply({

});
javascriptjqueryhtml
17
Grammin

Vous pouvez utiliser la récursion ici pour faire cela. Par exemple:

jQuery(document).ready(checkContainer);

function checkContainer () {
  if($('#divIDer').is(':visible'))){ //if the container is visible on the page
    createGrid();  //Adds a grid to the html
  } else {
    setTimeout(checkContainer, 50); //wait 50 ms, then try again
  }
}

Fondamentalement, cette fonction vérifiera que l'élément existe et est visible. Si c'est le cas, votre fonction createGrid() sera exécutée. Sinon, il faudra attendre 50ms et réessayer.

Remarque: Idéalement, vous utiliseriez simplement la fonction de rappel de votre appel AJAX pour savoir quand le conteneur a été ajouté, mais il s'agit d'une approche autonome à force brute. :)

28
Matthew Blancarte

Jusqu'ici, le seul moyen "d'écouter" les événements DOM, comme l'insertion ou la modification de Elements, consistait à utiliser ce que l'on appelle Mutation Events. Par exemple

document.body.addEventListener('DOMNodeInserted', function( event ) {
    console.log('whoot! a new Element was inserted, see my event object for details!');
}, false);

Lectures supplémentaires à ce sujet: MDN

Le problème avec événements de mutation était (est) qu'ils ne se sont jamais vraiment introduits dans une spécification officielle à cause d'incohérences et d'autres problèmes. Après un certain temps, ces événements ont été implémentés dans tous les navigateurs modernes, mais ils ont été déclarés comme deprecated, autrement dit Vous ne voulez pas les utiliser.

Le replacement officiel pour les événements de mutation est l'objet MutationObserver().

Lectures supplémentaires à ce sujet: MDN

La syntaxe actuelle ressemble à ceci:

var observer = new MutationObserver(function( mutations ) {
    mutations.forEach(function( mutation ) {
         console.log( mutation.type );
    }); 
});

var config = { childList: true };

observer.observe( document.body, config );

À ce jour, l’API a été implémentée dans les nouvelles versions de Firefox, Chrome et Safari. Je ne suis pas sûr de IE et d'Opera. Le compromis est donc que vous ne pouvez cibler que des navigateurs de premier ordre.

8
jAndy

Pour faire quelque chose après une certaine charge div de la fonction .load(). Je pense que c'est exactement ce dont vous avez besoin:

  $('#divIDer').load(document.URL +  ' #divIDer',function() {

       // call here what you want .....


       //example
       $('#mydata').show();
  });
2
Mohamad Osama

dans votre élément <div></div>, vous pouvez appeler la $(document).ready(function(){}); pour exécuter une commande, quelque chose comme

<div id="div1">
    <script>
        $(document).ready(function(){
         //do something
        });
    </script>
</div>

et vous pouvez faire de même avec les autres divs que vous avez . 

1
dr.Crow

Grâce à la fonction jQuery.ready, vous pouvez spécifier la fonction qui est exécutée lorsque DOM est chargé . DOM entier, pas n'importe quelle div.

Donc, vous devriez utiliser ready d'une manière un peu différente

$.ready(function() {
    createGrid();
});

C'est dans le cas où vous n'utilisez pas AJAX pour charger votre div

1
Pavel Gruba

Nous pouvons le faire soit par setTimeout OU requestAnimationFrame

jQuery(document).ready(checkContainer);

Utiliser setTimeout

function checkContainer () {
  if(!$('#divIDer').is(':visible'))){
    setTimeout(checkContainer, 50);
   } else {
   createGrid();
  }
}

ou en utilisant window.requestAnimationFrame (recommandé)

function checkContainer () {
  if(!$('#divIDer').is(':visible'))){
    window.requestAnimationFrame(checkContainer);
   } else {
   createGrid();
  }
}

Au cas où vous auriez besoin de passer un paramètre, utilisez comme ci-dessous

setTimeout(function(){ checkContainer('parameter'); }, 50);
window.requestAnimationFrame(function(){ checkContainer('parameter'); })

;

0
Chetabahana