examples - jquery selector

Selector JQuery en elemento agregado dinámicamente

Question

No puedo averiguar cómo convencer a JQuery para que seleccione un elemento (no controladores de enlace) que se inserte dinámicamente en el DOM después de que se cargue la página.

Por ejemplo:

Si tengo HTML:

<div id="bar">
World!
</div>

Luego creo un nuevo elemento y lo inserto en DOM:

var foo = ''<div id="foo">Hello</div>'';
$("#bar").before(foo);

Termino con esto:

<div id="foo">Hello</div>
<div id="bar">
World!
</div>

Más adelante, es posible que desee hacer algo diferente con el elemento que inserté, usando JQuery para manipular ese nuevo elemento. Pero si intento hacer:

myHappyEl = $("#foo");

Entonces myHappyEl quedará indefinido. JQuery no lo ve, probablemente porque se adjunta después de cargar DOM.

He visto muchas sugerencias que abordan un tema posiblemente relacionado pero sutilmente diferente, en el que la solución es usar .live () /. On () para adjuntar un detector de eventos cuando un elemento se crea. Eso sería genial si quisiera capturar un evento de clic o algo así, pero no lo hago; Quiero poder seleccionar los elementos agregados dinámicamente.

Answer 1

Tendrá que asignar esa variable después de que el elemento haya sido insertado, así:

var myHappyEl = $("#foo"); //Nothing, it isnt there
var foo = ''<div id="foo">Hello</div>'';
$("#bar").before($(foo));
myHappyEl = $("#foo");

De lo contrario, el elemento no existe en la página.