Comment puis-je appeler une fonction une fois qu'un élément a été créé dans jQuery?

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

  •  29-10-2019
  •  | 
  •  

Question

Je veux appeler une fonction une fois qu'un élément a été créé. Y a-t-il un moyen de faire cela?

Exemple:

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

La solution

Comment créez-vous l'élément?

Si vous le créez dans le HTML statique, utilisez simplement .ready(handler) ou .on("load", handler). Si vous utilisez Ajax, c'est une autre bouilloire de poisson.

Si vous utilisez jQuery load() Fonction Ensuite, il y a un rappel que vous pouvez exécuter lorsque le contenu a été chargé:

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

Si vous utilisez jQuery $.ajax ou $.get/$.post Fonctions Il y a alors un rappel de réussite dans ce domaine:

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

Si vous créez simplement l'élément et que vous l'appuyez comme ceci:

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

Ensuite, vous pouvez le faire à la place:

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

Mais cela n'aura pas d'importance - car il est synchrone (ce qui signifie que la prochaine ligne de code ne s'exécutera pas tant qu'elle ne sera pas ajoutée à l'élément au dom ... - sauf si vous chargez des images et autres) afin que vous puissiez simplement faire :

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

Mais, en disant, en disant que vous pourriez simplement faire ceci:

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

Autres conseils

Vous voudrez peut-être regarder sur jQuery Direct événements. Vous attachez un gestionnaire d'événements à un sélecteur qui correspond maintenant ou après que des éléments supplémentaires sont créés dans votre DOM.

Donc, si vous avez un <ul> Et vous créez dynamiquement nouveau <li> articles, dans votre $(document).ready() Vous pouvez câbler un sélecteur à un gestionnaire d'événements afin que tous vos <li> Des éléments seront câblés pour cet événement.

Voici un jsfiddle Échantillonner ces démos live.

J'espère que cela t'aides.

Vous pouvez essayer ce code

$('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>

Parfois, cela est nécessaire pour un élément DOM créé / chargé en dehors de votre propre script, soit par une bibliothèque JS différente, soit par un événement en dehors de votre contrôle direct.

Pour de tels scénarios, je définis toujours un intervalle qui vérifie périodiquement si l'élément cible existe et si cela est vrai, l'intervalle se supprime et exécute une fonction de rappel.

Pour cela, j'ai une fonction prédéfinie que je réutilise:

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

Découvrez .live () son meilleur après la création de l'élément ,,

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

Puis ajouter plus tard un nouvel élément:

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

$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

   console.log("I have been created!");

});

Vous pouvez utiliser setterval Fonction pour vérifier l'existence d'un élément:

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

Le plus simple consiste à invoquer directement le rappel après avoir créé l'élément :)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top