it-swarm.com.de

Wie rufe ich eine Funktion auf, nachdem ein Div fertig ist?

Ich habe folgendes in meiner Javascript-Datei:

var divId = "divIDer";

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

Das HTML sieht ungefähr so ​​aus:

<div id="divIDer"><div>

Manchmal wird jedoch die createGrid () - Funktion aufgerufen, bevor mein divIder tatsächlich auf die Seite geladen wird. Wenn ich also versuche, mein Raster zu rendern, kann es nicht das richtige div finden, auf das es zeigen soll, und es wird nie gerendert. Wie kann ich eine Funktion aufrufen, nachdem mein Div vollständig verwendet werden kann?

Bearbeiten:

Ich lade in das div mit Extjs:

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

tpl.apply({

});
17
Grammin

Sie können hier Rekursion verwenden. Zum Beispiel:

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
  }
}

Grundsätzlich prüft diese Funktion, ob das Element vorhanden und sichtbar ist. Wenn dies der Fall ist, wird Ihre createGrid() Funktion ausgeführt. Wenn nicht, wartet es 50ms und versucht es erneut.

Hinweis :: Im Idealfall würden Sie einfach die Rückruffunktion Ihres Aufrufs AJAX verwenden, um zu erfahren, wann der Container angehängt wurde. Dies ist jedoch eine eigenständige Herangehensweise. :)

28

Bisher bestand die einzige Möglichkeit, DOM-Ereignisse "zu hören", wie das Einfügen oder Ändern von Elements, darin, die so genannten Mutation Events zu verwenden. Zum Beispiel

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

Lesen Sie dazu weiter: MDN

Das Problem mit Mutation Events war (ist), dass sie wegen Unstimmigkeiten und so etwas nie wirklich in eine offizielle Spezifikation eingedrungen sind. Nach einiger Zeit wurden diese Ereignisse in allen modernen Browsern implementiert, aber sie wurden als deprecated deklariert, mit anderen Worten. Sie möchten sie nicht verwenden.


Das offizielle replacement für die Mutation Events ist das MutationObserver()-Objekt.

Lesen Sie dazu weiter: MDN

Die Syntax sieht derzeit so aus

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

var config = { childList: true };

observer.observe( document.body, config );

Zu diesem Zeitpunkt wurde die API in neueren Versionen von Firefox, Chrome und Safari implementiert. Ich bin nicht sicher über IE und Opera. Der Kompromiss hier ist definitiv, dass Sie nur für Topnotch-Browser anvisieren können.

8
jAndy

Um etwas zu tun, nachdem bestimmte div von Funktion .load()..__ geladen wurde.

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

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


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

in Ihrem <div></div>-Element können Sie den Befehl $(document).ready(function(){}); aufrufen

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

und Sie können dasselbe mit anderen divs tun, die Sie haben . dies war geeignet, wenn Sie Ihr div über die partielle Ansicht laden 

1
dr.Crow

Mit der jQuery.ready-Funktion können Sie eine Funktion angeben, die ausgeführt wird, wenn DOM geladen wird .. _. Das gesamte DOM, nicht irgendein Div, das Sie möchten.

Also sollte man ready etwas anders verwenden

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

Dies ist der Fall, wenn Sie AJAX nicht verwenden, um Ihr div zu laden

1
Pavel Gruba

Wir können es entweder durch setTimeout ODER requestAnimationFrame

jQuery(document).ready(checkContainer);

setTimeout verwenden

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

oder mit window.requestAnimationFrame (empfohlen)

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

Wenn Sie einen Parameter übergeben müssen, verwenden Sie den folgenden Befehl

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

;

0
Chetabahana