javascript - funciones - onclick jquery ejemplos

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

Question

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

Answer 1

¿Cómo estás creando el elemento?

Si lo está creando en el HTML estático, simplemente use .ready(handler) o .on("load", handler) . Si estás usando AJAX, ese es otro hervidor de pescado.

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

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

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

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

Si solo estás creando el elemento y agregándolo de esta manera:

$(''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 síncrono (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), así que puede hacerlo :

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

Pero de hecho, diciendo que simplemente puedes hacer esto:

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

Answer 2

A veces esto es necesario para un elemento DOM creado / cargado fuera de su propio script, ya sea por una biblioteca js diferente o por 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 elimina 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
    });

Answer 3

Es posible que desee ver en jQuery eventos en live . Adjunte un controlador de eventos a un selector que coincida ahora o después de que se creen elementos adicionales en su DOM.

Por lo tanto, si tiene un <ul> y crea dinámicamente nuevos elementos <li> , en su $(document).ready() puede conectar un selector a un controlador de eventos para que todos sus elementos <li> estén conectados. para ese evento.

Aquí hay una muestra de jsFiddle que muestra en live .

Espero que esto ayude.

Answer 4

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

Answer 5

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

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

Y luego añadir un nuevo elemento:

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

Answer 6

puedes probar este codigo

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

Answer 7

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

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

});