web-dev-qa-db-fra.com

Comment puis-je appeler une fonction après avoir créé un élément dans jquery?

Je veux appeler une fonction après la création d'un élément. 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!");
});
javascriptjqueryloaded
25
Dennis Martinez

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 bien que ce soit une autre marmite de poisson.

Si vous utilisez la fonction load() de jQuery, vous pouvez exécuter un rappel lorsque le contenu a été chargé:

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

Si vous utilisez les fonctions $.ajax Ou $.get/$.post De jQuery, il y a un rappel réussi:

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

Si vous créez simplement l'élément et l'ajoutez 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 ligne de code suivante ne s'exécutera pas tant qu'il n'aura pas ajouté l'élément au DOM de toute façon ... - à moins que vous ne chargiez des images, etc.) afin que vous puissiez simplement faire :

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

Mais en fait, en disant que vous pouvez simplement faire ceci:

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

Vous voudrez peut-être examiner les événements jQuery live . Vous attachez un gestionnaire d'événements à un sélecteur qui correspond maintenant ou après la création d'éléments supplémentaires dans votre DOM.

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

Voici un exemple jsFiddle qui démontre live.

J'espère que cela t'aides.

7
David Hoerster

consultez .live () de son mieux après la création de l'élément ,

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

Et puis ajoutez plus tard un nouvel élément:

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

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 fixe 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
    });
1
Dimitar Nikovski

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>
1
MEAbid
$("<div id=\"elem\"></div>").appendTo("#parent").each(function(){

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

});
0
Tomgrohl

Vous pouvez utiliser la fonction setInterval 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
0
SnnSnn