jQuery click no funciona para elementos creados dinámicamente [duplicado]
Tengo una parte de jQuery que recorre cada elemento en un div( #container) determinado y genera una alerta de JavaScript cada vez que se hace clic en un intervalo. Esto funciona bien si los <span>'s son estáticos.
Sin embargo, si uso un fragmento de código como:
$(someLink).click(function(){
$("#container").html( <new html with new spans> )
});
El código jQuery no se activa. Aunque parezca extraño
Mi pregunta es: ¿Existe alguna razón por la que mis eventos Click no funcionan para elementos creados dinámicamente? Supongo que tendré que agregar algo a mi documento listo o script de latido (que se activa cada 100 milisegundos) para conectar los eventos.
Hacer esto:
$( '#wrapper' ).on( 'click', 'a', function () { ... })
$( 'body' ).on( 'click', '.your_dynamic_elem_css_selector', function () { ... }) # use body as wrapper static elem
donde #wrapperhay un elemento estático en el que agregas los enlaces dinámicos.
Entonces, tienes un contenedor que está codificado en el código fuente HTML:
<div id="wrapper"></div>
y lo llenas de contenido dinámico. La idea es delegar los eventos a ese contenedor, en lugar de vincular controladores directamente a los elementos dinámicos.
Por cierto, recomiendo Backbone.js : le da estructura a este proceso:
var YourThing = Backbone.View.extend({
// the static wrapper (the root for event delegation)
el: $( '#wrapper' ),
// event bindings are defined here
events: {
'click a': 'anchorClicked'
},
// your DOM event handlers
anchorClicked: function () {
// handle click event
}
});
new YourThing; // initializing your thing
fuente: esta publicación
Si creó sus elementos dinámicamente (usando javascript), entonces este código no funciona. Porque, .click() adjuntará eventos a elementos que ya existen. Como está creando dinámicamente sus elementos usando javascript, no funciona.
Para ello, debe utilizar algunas otras funciones que funcionan en elementos creados dinámicamente. Esto se puede hacer de diferentes maneras..
Antes tenemos. función en vivo ()
$('selector').live('click', function()
{
//your code
});
pero .live() está en desuso. Esto puede ser reemplazado por otras funciones.
Delegado ():
Usando la función delegar () puede hacer clic en elementos HTML generados dinámicamente.
Ejemplo:
$(document).delegate('selector', 'click', function()
{
//your code
});
EDITAR: El método delegado() quedó obsoleto en la versión 3.0. Utilice el método on() en su lugar.
EN():
Usando la función on (), puede hacer clic en elementos HTML generados dinámicamente.
Ejemplo:
$(document).on('click', 'selector', function()
{
// your code
});
Prueba algo como
$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });
Básicamente, necesitas adjuntar tus eventos desde una parte no dinámica del DOM para que pueda detectar elementos creados dinámicamente.
