javascript - eventos - jQuery clic no funciona para elementos creados dinámicamente

on click jquery

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Enlace de eventos a elementos creados dinámicamente? 23 respuestas

Tengo una pieza de jQuery que recorre cada elemento en un div determinado ( #container ) y hace una alerta de javascript cada vez que se hace clic en un tramo. 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 dispara. Por extraño que parezca

Mi pregunta es: ¿Hay alguna razón por la cual mis eventos Click no funcionen para los artículos creados dinámicamente? Supongo que tendré que agregar algo en mi documento listo o script de latido del corazón (que se dispara cada 100 milisegundos) para conectar los eventos.

Answer 1

El uso de .click solo .click eventos a elementos que ya existen.

Necesita utilizar una función que supervisa los eventos creados dinámicamente: en las versiones anteriores de JQuery, esto era .live() , pero esto ha sido reemplazado por .on()

Answer 2

Hacer esto:

 $( ''#wrapper'' ).on( ''click'', ''a'', function () { ... });

donde #wrapper es un elemento estático en el que se agregan los enlaces dinámicos.

Entonces, tienes un contenedor que está codificado en el código fuente HTML:

<div id="wrapper"></div>

y lo llenas con contenido dinámico. La idea es delegar los eventos a ese contenedor, en lugar de vincular manejadores directamente en los elementos dinámicos.

Por cierto, recomiendo Backbone.js - 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

Answer 3

Me enfrenté a este problema hace unos días: la solución para mí era usar .bind () para enlazar la función requerida con el enlace creado dinámicamente.

var catLink = $(''<a href="#" id="'' + i + ''" class="lnkCat">'' + category.category + ''</a>'');
catLink.bind("click", function(){
$.categories.getSubCategories(this);
});
getSubCategories : function(obj) {
//do something
}

Espero que esto ayude.

Answer 4

Pruebe algo como

$("#container").on(''click'', ''someLinkSelector'', function(){ $("#container").html( <new html with new spans> ) });

Básicamente, necesita adjuntar sus eventos desde una parte no dinámica del DOM para que pueda ver los elementos creados dinámicamente.

Answer 5

Tienes que agregar un evento de clic a un elemento existente. No puede agregar evento a elementos din creados dinámicamente. Si desea agregarles un evento, debe vincular el evento a un elemento existente usando ".on".

$(''p'').on(''click'',''selector_you_dynamic_created'',function(){...});

.delegate debería funcionar, también.

Answer 6

Use la nueva función jQuery on en 1.7.1 -

.on()

Answer 7

fuente: esta publicación

si creó sus elementos dinámicamente (usando javascript), entonces este código no funciona. Como, .click () adjuntará eventos a elementos que ya existen. A medida que crea dinámicamente sus elementos mediante javascript, no funciona.

Para esto, debe usar algunas otras funciones que funcionan en elementos creados dinámicamente. Esto se puede hacer de diferentes maneras..

Antes tenemos. función live ()

$(''selector'').live(''click'', function()
{
//your code
});

pero .live () está en desuso. Esto puede ser reemplazado por otras funciones.

Delegado ():

Usando la función delegate () puede hacer clic en elementos HTML generados dinámicamente.

Ejemplo:

$(document).delegate(''selector'', ''click'', function()
{
//your code
});

EN():

Usando la función on () puede hacer clic en elementos HTML generados dinámicamente.

Ejemplo:

$(document).on(''click'', ''selector'', function()
{
// your code
});

Answer 8

$("#container").delegate("span", "click", function (){
alert(11);
});