Wie kann ich eine Funktion aufrufen, nachdem ein Element in jquery erstellt wurde?

StackOverflow https://stackoverflow.com/questions/6386128

  •  29-10-2019
  •  | 
  •  

Frage

Ich möchte eine Funktion aufrufen, nachdem ein Element erstellt wurde.Gibt es eine Möglichkeit, dies zu tun?

Beispiel: 

$("#myElement").ready(function() {
    // call the function after the element has been loaded here
    console.log("I have been loaded!");
});

War es hilfreich?

Lösung

Wie erstellen Sie das Element?

Wenn Sie es im statischen HTML erstellen, verwenden Sie einfach .ready(handler) oder .on("load", handler).Wenn Sie AJAX verwenden, ist dies ein weiterer Fischkessel.

Wenn Sie die load()-Funktion von jQuery verwenden, gibt es einen Rückruf, den Sie ausführen können, wenn der Inhalt geladen wurde: 

$('#element').load('sompage.html', function(){ /* callback */ });

Wenn Sie die Funktionen $.ajax oder $.get / $.post von jQuery verwenden, gibt es einen erfolgreichen Rückruf: 

$.ajax({
  url: 'somepage.html',
  success: function(){
    //callback
  }
});

Wenn Sie das Element nur erstellen und wie folgt anhängen: 

$('body').append('<div></div>');

Dann können Sie stattdessen Folgendes tun: 

$('<div />', { id: 'mydiv' }).appendTo('body').ready(function(){ /* callback */ });

Aber das spielt keine Rolle - weil es synchron ist (was bedeutet, dass die nächste Codezeile erst ausgeführt wird, wenn das Element trotzdem zum DOM hinzugefügt wurde ... - es sei denn, Sie laden Bilder und dergleichen)kann einfach tun: 

$('<div />', { id: 'mydiv' }).appendTo('body');
$('#mydiv').css({backgroundColor:'red'});

Aber tatsächlich, wenn Sie sagen, dass Sie dies einfach tun könnten: 

$('<div />', {id:'mydiv'}).appendTo('body').css({backgroundColor:'red'});

Andere Tipps

Möglicherweise möchten Sie sich mit jQuery Live -Ereignissen befassen.Sie hängen einen Ereignishandler an einen Selektor an, der entweder jetzt oder nach dem Erstellen zusätzlicher Elemente in Ihrem DOM übereinstimmt.

Wenn Sie also einen <ul> haben und dynamisch neue <li>-Elemente erstellen, können Sie in Ihrem $(document).ready() einen Selektor mit einem Ereignishandler verbinden, sodass alle Ihre <li>-Elemente für dieses Ereignis verdrahtet werden.

Hier ist ein jsFiddle -Beispiel, das den live demonstriert.

Hoffe das hilft.

Sie können diesen Code ausprobieren 

$('body').on('click', '#btn', function() {
  $($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
  width: 100px;
  background: red;
  color: white;
  height: 20px;
  font: 12px;
  padding-left: 4px;
  line-height: 20px;
  margin: 3px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="./index.css">
  </head>
  <body>
    <div>
      <!-- Button trigger modal -->
      <button type="button" id="btn">Create Div</button>
      <div id="old">

      </div>
    </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

Manchmal ist dies für ein DOM-Element erforderlich, das außerhalb Ihres eigenen Skripts erstellt / geladen wurde, entweder von einer anderen js-Bibliothek oder von einem Ereignis außerhalb Ihrer direkten Kontrolle.

Für solche Szenarien habe ich immer ein Intervall festgelegt, das regelmäßig überprüft, ob das Zielelement vorhanden ist. Wenn dies zutrifft, löscht sich das Intervall von selbst und führt eine Rückruffunktion aus.

Dafür habe ich eine vordefinierte Funktion, die ich wieder verwende: 

function runAfterElementExists(jquery_selector,callback){
    var checker = window.setInterval(function() {
     //if one or more elements have been yielded by jquery
     //using this selector
     if ($(jquery_selector).length) {

        //stop checking for the existence of this element
        clearInterval(checker);

        //call the passed in function via the parameter above
        callback();
        }}, 200); //I usually check 5 times per second
}

//this is an example place in your code where you would like to
//start checking whether the target element exists
//I have used a class below, but you can use any jQuery selector
runAfterElementExists(".targetElementClass", function() {
    //any code here will run after the element is found to exist
    //and the interval has been deleted
    });

checke .live () am besten nach dem erstellten Element aus ,, 

$('.clickme').live('click', function() {
      // Live handler called.
});

Und später ein neues Element hinzufügen: 

$('body').append('<div class="clickme">Another target</div>');

generasacodicetagpre.

Sie können setInterval verwenden Funktion zum Überprüfen der Existenz eines Elements: 

var CONTROL_INTERVAL = setInterval(function(){
    // Check if element exist
    if($('#some-element').length > 0){
        // ...
        // Since element is created, no need to check anymore
        clearInterval(CONTROL_INTERVAL);
    }
}, 100); // check for every 100ms

Am einfachsten ist es, den Rückruf nach dem Erstellen des Elements direkt aufzurufen :)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top