texto - jQuery sobre carga de elemento dinámico

obtener el texto de un button jquery

Question

Estoy intentando realizar una manipulación condicional de los elementos que se agregan dinámicamente a algún contenedor de una página, pero me falta un evento.

Digamos que tengo un contenedor:

<div id="container"></div>

Puedo vincular fácilmente un controlador de eventos a la función de clic para todos los elementos nuevos, usando

$(''#container'').on(''click'', ''.sub-element'', function() { ... });

Pero, ¿a qué me vinculo para obtener un gancho "de una sola vez" cuando el elemento se agrega a #container ? He tratado de enlazar a ready y load en vano. ¿Hay alguna forma de hacer esto o tengo que encontrar otra solución a mi problema?

Este violín contiene mi ejemplo que no funciona .

Answer 1

Después de leer la respuesta anterior, ahora uso esto con éxito:

$(''body'').on({
   DOMNodeInserted : function(){
      alert(''I have been added dynamically'');
   },
   click : function(){
      alert(''I was clicked'');
   },
   ''.dynamicElements''
});

Ahora todos mis elementos dynamicElements pueden hacer cosas mientras se cargan, utilizando el impresionante mapa de eventos .on() .

Answer 2

Puede activar un evento personalizado en el elemento DOM recién agregado que puede ser recogido por un controlador de eventos jQuery:

//bind to our custom event for the `.sub-element` elements
$(''#container'').on(''custom-update'', ''.sub-element'', function(){
    $(this).html(''<b>yaay!</b>'');
});

//append a new element to the container,
//then select it, based on the knowledge that it is the last child of the container element,
//and then trigger our custom event on the element
$(''#container'').append(''<div class="sub-element">No worky!</div>'').children().last().trigger(''custom-update'');

Aquí hay una demostración: http://jsfiddle.net/ggHh7/4/

Este método le permite hacer algo globalmente, incluso si carga el contenido dinámico a través de diferentes métodos.

Actualizar

No estoy seguro de la compatibilidad del navegador ( DOMNodeInserted IE8 y anteriores no lo admiten) pero puede usar el evento de mutación DOMNodeInserted para detectar cuándo se agrega un elemento DOM:

$(''#container'').on(''DOMNodeInserted'', ''.sub-element'', function(){
    $(this).html(''<b>yaay!</b>'');
})

$(''#container'').append(''<div class="sub-element">No worky!</div>'');

Aquí hay una demostración: http://jsfiddle.net/ggHh7/7/

ACTUALIZAR

Hay una nueva API para esto ya que DOMNodeInserted se deprecia en este momento. No lo he buscado pero se llama MutationOvserver : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver