create - jquery events w3schools
El evento de clic no funciona en elementos generados dinámicamente (20)
Cambio
$(".test").click(function(){
A
$(".test").live(''click'', function(){
DEMO EN VIVO
Esta pregunta ya tiene una respuesta aquí:
- ¿Enlace de eventos en elementos creados dinámicamente? 23 respuestas
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("h2").html("<p class=''test''>click me</p>")
});
$(".test").click(function(){
alert();
});
});
</script>
</head>
<body>
<h2></h2>
<button>generate new element</button>
</body>
</html>
Estaba intentando generar una nueva etiqueta con la test nombre de clase en <h2> haciendo clic en el botón. También definí un evento de clic asociado con la test . Pero el evento no funciona.
¿Alguien puede ayudar?
El Jquery .on funciona bien, pero tuve algunos problemas con el renderizado implementando algunas de las soluciones anteriores. Mi problema con el uso de .on es que de alguna manera estaba representando los eventos de manera diferente al método .hover .
Sólo fyi para cualquier otra persona que también puede tener el problema. Resolví mi problema volviendo a registrar el evento de desplazamiento del elemento agregado dinámicamente:
vuelva a registrar el evento de desplazamiento porque el desplazamiento no funciona para los elementos creados dinámicamente. así que cada vez que creo el elemento nuevo / dinámico, vuelvo a agregar el código de desplazamiento. funciona perfectamente
$(''#someID div:last'').hover(
function() {
//...
},
function() {
//...
}
);
El enlace click() que está utilizando se llama enlace "directo" que solo unirá el controlador a elementos que ya existen . No se atará a elementos creados en el futuro. Para hacer eso, tendrás que crear un enlace "delegado" usando on() .
Los eventos delegados tienen la ventaja de que pueden procesar eventos de elementos descendientes que se agregan al documento en un momento posterior.
Esto es lo que estás buscando:
var counter = 0;
$("button").click(function() {
$("h2").append("<p class=''test''>click me " + (++counter) + "</p>")
});
// With on():
$("h2").on("click", "p.test", function(){
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2></h2>
<button>generate new element</button>
Lo anterior funciona para aquellos que usan la versión 1.7+ de jQuery. Si está utilizando una versión anterior, consulte la respuesta anterior a continuación.
Respuesta anterior :
Intenta usar live() :
$("button").click(function(){
$("h2").html("<p class=''test''>click me</p>")
});
$(".test").live(''click'', function(){
alert(''you clicked me!'');
});
Trabajó para mi. Lo probé con jsFiddle.
O hay una nueva forma de hacerlo con delegate() :
$("h2").delegate("p", "click", function(){
alert(''you clicked me again!'');
});
El problema que tiene es que está intentando vincular la clase de "prueba" al evento antes de que haya algo con una clase de "prueba" en el DOM . Aunque puede parecer que todo esto es dinámico, lo que realmente está sucediendo es que JQuery pasa por alto el DOM y conecta el evento de clic cuando se ready() función ready() , lo que sucede antes de crear el "Click Me" en el evento de botón. .
Al agregar el evento "Haga clic en" prueba "al controlador de clic" botón ", se conectará después de que exista el elemento correcto en el DOM .
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h2").html("<p class=''test''>click me</p>")
$(".test").click(function(){
alert()
});
});
});
</script>
Usar live() (como han señalado otros) es otra forma de hacer esto, pero sentí que también era una buena idea señalar el pequeño error en su código JS. Lo que escribiste no estaba mal, solo tenía que estar correctamente controlado. Comprender cómo funcionan DOM y JS es una de las cosas difíciles para muchos desarrolladores tradicionales a la hora de entender.
live() es una forma más limpia de manejar esto y en la mayoría de los casos es la forma correcta de hacerlo. Esencialmente, es observar el DOM y volver a cablear las cosas siempre que los elementos dentro de él cambien.
Encontré dos soluciones en la documentación de jQuery:
Primero: utilizar delegado en cuerpo o documento
P.ej:
$("body").delegate(''.test'', ''click'', function(){
...
alert(''test'');
});
¿Por qué?
Respuesta: adjunte un controlador a uno o más eventos para todos los elementos que coincidan con el selector, ahora o en el futuro, en función de un conjunto específico de elementos raíz. enlace: delegate()
Segundo: coloque su función en "$ (documento)" , use "on" y adjúntela al elemento que desea activar. El primer parámetro es el "controlador de eventos", el segundo: el elemento y el tercero: la función. P.ej:
$( document ).on( ''click'', ''.test'', function () {
...
alert(''test'');
});
¿Por qué?
Respuesta: Los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en la página en el momento en que su código realiza la llamada a .on () . Para asegurarse de que los elementos estén presentes y puedan seleccionarse, realice la vinculación de eventos dentro de un controlador de documentos preparados para los elementos que están en la marca HTML de la página. Si se está inyectando nuevo HTML en la página, seleccione los elementos y adjunte los controladores de eventos después de colocar el nuevo HTML en la página. O, use eventos delegados para adjuntar un controlador de eventos, como se describe a continuación ... enlace: https://api.jquery.com/on/
Estoy trabajando con tablas que agregan elementos dinámicamente a ellas, y cuando uso on (), la única forma de hacer que funcione es usar un padre no dinámico como:
<table id="myTable">
<tr>
<td></td> // Dynamically created
<td></td> // Dynamically created
<td></td> // Dynamically created
</tr>
</table>
<input id="myButton" type="button" value="Push me!">
<script>
$(''#myButton'').click(function() {
$(''#myTable tr'').append(''<td></td>'');
});
$(''#myTable'').on(''click'', ''td'', function() {
// Your amazing code here!
});
</script>
Esto es realmente útil porque, para eliminar eventos vinculados con on() , puede usar off() , y para usar eventos una vez, puede usar one() .
La función .live funciona muy bien.
Es para elementos dinámicamente agregados al escenario.
$(''#selectAllAssetTypes'').live(''click'', function(event){
alert("BUTTON CLICKED");
$(''.assetTypeCheckBox'').attr(''checked'', true);
});
Saludos, Ankit.
La mejor manera de aplicar eventos en contenido generado dinámicamente mediante el uso de delegación.
$(document).on("eventname","selector",function(){
// code goes here
});
entonces tu código es así ahora
$(document).on("click",".test",function(){
// code goes here
});
No pude obtener en vivo o delegar para trabajar en un div en una caja de luz (tinybox).
Usé setTimeout con éxito, de la siguiente manera simple:
$(''#displayContact'').click(function() {
TINY.box.show({html:''<form><textarea id="contactText"></textarea><div id="contactSubmit">Submit</div></form>'', close:true});
setTimeout(setContactClick, 1000);
})
function setContactClick() {
$(''#contactSubmit'').click(function() {
alert($(''#contactText'').val());
})
}
PUEDES agregar en click a elementos creados dinámicamente. Ejemplo a continuación. Usando un cuándo para asegurarse de que está hecho. En mi ejemplo, estoy agarrando un div con la clase expandida, agregando un intervalo de "hacer clic para ver más" y luego usar ese intervalo para ocultar / mostrar el div original.
$.when($(".expand").before("<span class=''clickActivate''>Click to see more</span>")).then(function(){
$(".clickActivate").click(function(){
$(this).next().toggle();
})
});
Prueba .live() o .delegate()
Su elemento .test se agregó después del método .click() , por lo que no tenía el evento adjunto. Live y Delegate le dan a ese evento la activación de los elementos principales que verifican a sus hijos, por lo que cualquier cosa que se agregue después aún funciona. Creo que Live verificará todo el cuerpo del documento, mientras que el delegado puede asignarse a un elemento, por lo que el delegado es más eficiente.
Más información:
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
Si tiene un enlace dinámicamente agregado a algún contenedor o cuerpo:
var newLink= $("<a></a>", {
"id": "approve-ctrl",
"href": "#approve",
"class": "status-ctrl",
"data-attributes": "DATA"
}).html("Its ok").appendTo(document.body);
puede tomar su elemento javascript en bruto y agregarle un detector de eventos, como el clic :
newLink.get(0).addEventListener("click", doActionFunction);
No importa cuántas veces agregue esta nueva instancia de enlace, puede usarla como si estuviera usando una función de click jQuery.
function doActionFunction(e) {
e.preventDefault();
e.stopPropagation();
alert($(this).html());
}
Así recibirás un mensaje diciendo
Está bien
Tiene mejor desempeño que otras alternativas.
Extra : podría obtener un mejor rendimiento evitando jQuery y usando JavaScript simple. Si está utilizando IE hasta la versión 8, debe usar este polyfill para usar el método addEventListener
if (typeof Element.prototype.addEventListener === ''undefined'') {
Element.prototype.addEventListener = function (e, callback) {
e = ''on'' + e;
return this.attachEvent(e, callback);
};
}
También puedes usar onclick="do_something(this)" dentro del elemento
Una alternativa alternativa y más sucinta (IMHO) es utilizar una función de javascript en bruto que responda a un evento de clic, y luego pasar el elemento de destino a jQuery si lo desea. La ventaja de este enfoque es que puede agregar dinámicamente su elemento en cualquier lugar, y el controlador de clic "simplemente funcionará", y no necesita preocuparse por delegar el control a los elementos principales, y así sucesivamente.
Paso 1: actualice el html dinámico para activar un evento onclick. Asegúrate de pasar el objeto ''evento'' como argumento
$("button").click(function() { $("h2").html("<p class=''test'' onclick=''test(event)''> click me </p>") });
Paso 2: crear la función de prueba para responder al evento de clic
function test(e){ alert(); });
Paso 3 opcional: dado que está utilizando jQuery, supongo que será útil obtener una referencia al botón de origen
function test(e){ alert(); // Get a reference to the button // An explanation of this line is available here var target = (e.target)? e.target : e.srcElement; // Pass the button reference to jQuery to do jQuery magic var $btn = $(target); });
Use ''on'' cuando el clic se enlaza con los elementos ya presentes.
Por ejemplo
$(''test'').on(''click'',function(){
alert(''Test'');
})
Esto ayudará.
Utilice el método .on() con eventos delegados
$(''#staticParent'').on(''click'', ''.dynamicElement'', function() {
// Do something on an existent or future .dynamicElement
});
El método on() permite delegar cualquier controlador de eventos deseado a:
Elementos actuales o elementos futuros agregados al DOM en un momento posterior.
PD: ¡No uses .live() ! Desde jQuery 1.7+, el método .live() está en desuso.
Añade esta función en tu archivo js. Funcionará en todos los navegadores.
$(function() {
$(document).on("click", ''#mydiv'', function() {
alert("You have just clicked on ");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=''mydiv''>Div</div>
Razón:
En jQuery, haga clic en (): adjunta el controlador de eventos solo si el elemento ya existe en el código html.
No considerará el nuevo elemento que se crea dinámicamente (elemento Futuro) después de la página cargada.
Los elementos dinámicos se crean con la ayuda de javascript o jquery (no en html) .
Así que el evento click no se dispara.
Solución:
Para superar esto debemos usar la función () .
Las funciones delegate (), live () y on () tienen las ventajas sobre los elementos DOM.
on puede activar tanto los elementos existentes como los elementos futuros.
Puede considerar los elementos que están presentes en toda la página.
delegar (), las funciones en vivo () están en desuso (no usarlas).
Debe usar la función on para activar el evento en los elementos (futuros) creados dinámicamente.
Quite el código de $ (documento) .ready:
$(".test").click(function(){
alert();
});
Cambie a:
$(document).on(''click'',''.test'',function(){
alert(''Clicked'');
});
$(.surrounding_div_class).on( ''click'', ''.test'', function () {
alert( ''WORKS!'' );
});
Solo funcionará si el DIV con la clase .surrounding_div_class es el padre inmediato al objeto .test
Si hay otro objeto en el div que se llenará, no funcionará.