Come posso chiamare una funzione dopo che un elemento è stato creato in jquery?

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

  •  29-10-2019
  •  | 
  •  

Domanda

Voglio chiamare una funzione dopo che un elemento è stato creato.C'è un modo per farlo?

Esempio: 

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

Soluzione

Come crei l'elemento?

Se lo stai creando nell'HTML statico, usa semplicemente .ready(handler) o .on("load", handler).Se stai usando AJAX, però, questo è un altro paio di maniche.

Se stai utilizzando la funzione load() di jQuery, è disponibile un callback che puoi eseguire quando i contenuti sono stati caricati: 

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

Se stai usando le funzioni $.ajax o $.get / $.post di jQuery, allora c'è un callback di successo in questo: 

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

Se stai solo creando l'elemento e aggiungendolo in questo modo: 

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

Quindi puoi farlo invece: 

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

Ma questo non avrà importanza, perché è sincrono (il che significa che la riga di codice successiva non verrà eseguita fino a quando non verrà aggiunto l'elemento al DOM comunque ... - a meno che tu non stia caricando immagini e simili)può solo fare: 

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

Ma in pratica, dicendo che potresti semplicemente fare questo: 

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

Altri suggerimenti

Potresti voler esaminare gli eventi dal vivo di jQuery.Alleghi un gestore di eventi a un selettore che corrisponde ora o dopo la creazione di elementi aggiuntivi nel tuo DOM.

Quindi, se hai un <ul> e crei dinamicamente nuovi elementi <li>, nel tuo $(document).ready() puoi collegare un selettore a un gestore di eventi in modo che tutti i tuoi elementi <li> siano cablati per quell'evento.

Ecco un jsFiddle campione che mostra live.

Spero che questo aiuti.

puoi provare questo codice 

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

A volte questo è necessario per un elemento DOM creato / caricato al di fuori del tuo script, da una libreria js diversa o da un evento al di fuori del tuo controllo diretto.

Per tali scenari, imposto sempre un intervallo che controlla periodicamente se l'elemento di destinazione esiste e, se questo è vero, l'intervallo si cancella ed esegue una funzione di callback.

Per questo, ho una funzione predefinita che riutilizzo: 

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

dai un'occhiata a .live () al meglio dopo l'elemento creato ,, 

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

E successivamente aggiungi un nuovo elemento: 

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

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

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

});

Puoi utilizzare setInterval funzione per verificare l'esistenza di un elemento: 

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

Il più semplice è invocare direttamente la richiamata dopo aver creato l'elemento :)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top