¿Cómo puedo llamar a una función después de crear un elemento en jquery?

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

  •  29-10-2019
  •  | 
  •  

Pregunta

Quiero llamar a una función después de que se haya creado un elemento.¿Hay alguna forma de hacer esto?

Ejemplo:

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

Solución

¿Cómo está creando el elemento?

Si lo está creando en HTML estático, utilice .ready(handler) o .on("load", handler).Si estás usando AJAX, eso es otra olla de pescado.

Si está utilizando la función load() de jQuery, hay una devolución de llamada que puede ejecutar cuando se cargue el contenido: 

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

Si está utilizando las funciones $.ajax o $.get / $.post de jQuery, entonces hay una devolución de llamada exitosa en eso: 

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

Si solo está creando el elemento y anexándolo así: 

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

Entonces puedes hacer esto en su lugar: 

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

Pero esto no importará, porque es sincrónico (lo que significa que la siguiente línea de código no se ejecutará hasta que se agregue el elemento al DOM de todos modos ..., a menos que esté cargando imágenes y demás)solo puedo hacer: 

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

Pero en realidad, diciendo que simplemente podrías hacer esto: 

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

Otros consejos

Es posible que desees investigar jQuery. vivir eventos.Adjuntas un controlador de eventos a un selector que coincide ahora o después de que se creen elementos adicionales en tu DOM.

Entonces si tienes un <ul> y creas dinámicamente nuevos <li> artículos, en su $(document).ready() puedes conectar un selector a un controlador de eventos para que todos tus <li> Los elementos serán cableados para ese evento.

Aquí está un jsFiddle muestra esas demostraciones live.

Espero que esto ayude.

puedes probar este código 

$('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 veces esto es necesario para un elemento DOM creado / cargado fuera de su propio script, ya sea por una biblioteca js diferente o un evento fuera de su control directo.

Para tales escenarios, siempre establezco un intervalo que verifica periódicamente si el elemento de destino existe y, si esto es cierto, el intervalo se borra y ejecuta una función de devolución de llamada.

Para esto, tengo una función predefinida que reutilizo: 

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

echa un vistazo a .live () es mejor después del elemento creado ,, 

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

Y luego agregue un nuevo elemento: 

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

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

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

});

Puede usar setinterval Función para verificar la existencia de 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

Lo más sencillo es invocar directamente la devolución de llamada después de crear el elemento :)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top