jQuery en la carga del elemento dinámico

Question

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

Decir que tengo un contenedor:

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

puedo unir fácilmente un controlador de eventos para la función de hacer clic para todos los elementos nuevos, usando

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

Pero qué es lo que se unen a fin de obtener un gancho de "una sola vez" cuando el elemento se agrega al #container. He intentado enlazar a ready y load en vano. ¿Hay alguna manera de hacerlo, o tengo que encontrar otra solución a mi problema?

This fiddle contains my non-working example.

Answer 1

Puede desencadenar un evento personalizado en el elemento DOM recién agregado que puede ser captada por un controlador de eventos de 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'); 

He aquí una demostración: http://jsfiddle.net/ggHh7/4/

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

actualización

No estoy seguro del soporte de los navegadores (voy a suponer IE8 y anteriores no admiten esto) pero se puede utilizar el evento DOMNodeInserted mutación para detectar cuando se añade un elemento DOM:

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

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

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

ACTUALIZACIÓN

Hay una nueva API para thi s como DOMNodeInserted se deprecia en este momento. No he mirado en él pero se llama MutationOvserver: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 2

Después de leer la respuesta anterior Ahora utilizo este éxito:

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

Ahora toda mi dynamicElements puede hacer cosas como están cargados, la utilización de la impresionante .on() mapa del evento.