Foros del Web » Programando para Internet » Jquery »

evento click a elemento agregado despues jquery?

Estas en el tema de evento click a elemento agregado despues jquery? en el foro de Jquery en Foros del Web. @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original $ ( '.alerta' ) . on ( 'click' , function ( ) {           ...
  #1 (permalink)  
Antiguo 01/04/2020, 17:07
 
Fecha de Ingreso: agosto-2012
Ubicación: M.
Mensajes: 2.023
Antigüedad: 7 años, 9 meses
Puntos: 52
evento click a elemento agregado despues jquery?

Código Javascript:
Ver original
  1. $('.alerta').on('click', function(){
  2.            
  3.         alert("entro");
  4.  
  5.  
  6.         });
pero no entra y ya genere otro elemento con esa clase, y no reacciona, asi es como se hace?
__________________
a veces creemos que es algo básico pero al profundizar nos damos cuenta que estábamos tocando solo la cola de la culebra

Última edición por minombreesmm; 01/04/2020 a las 17:21
  #2 (permalink)  
Antiguo 01/04/2020, 17:25
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.064
Antigüedad: 11 años, 9 meses
Puntos: 2215
Respuesta: evento click a elemento agregado despues jquery?

A qué te refieres con "agregado después jquery"?

Tu código actual aplicaría el evento a todos los elementos existentes que tengan la clase "alerta", pero si después agregas más elementos con la misma clase, no se les va a agregar automáticamente el evento.

Necesitas ser más específico y mostrar más código para no estarle jugando al adivino... aunque, por la cuarentena, más de alguno hemos experimentado para obtener más habilidades.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 01/04/2020, 17:40
 
Fecha de Ingreso: agosto-2012
Ubicación: M.
Mensajes: 2.023
Antigüedad: 7 años, 9 meses
Puntos: 52
Respuesta: evento click a elemento agregado despues jquery?

Cita:
Iniciado por Triby Ver Mensaje
A qué te refieres con "agregado después jquery"?

Tu código actual aplicaría el evento a todos los elementos existentes que tengan la clase "alerta", pero si después agregas más elementos con la misma clase, no se les va a agregar automáticamente el evento.

Necesitas ser más específico y mostrar más código para no estarle jugando al adivino... aunque, por la cuarentena, más de alguno hemos experimentado para obtener más habilidades.
Y cual seria entonces la forma correcta de que se le agregue el evento automatica?

Código Javascript:
Ver original
  1. function agregar(inicio,fin,comision,l){
  2.        
  3.  
  4.         onclickk='class="pointer" onclick="seleccionar_rango_l(\''+inicio+'\',\''+fin+'\',\''+comision+'\')"';
  5.  
  6.         trr = '<tr '+onclickk+'>';//PENDIENTE
  7.  
  8.         fila = trr+'<td  class="input_celda" elinput="'+l+'_tr_1" > <label id="'+l+'_lblr_1">'+inicio+'</label><input type="text" style="display:none"  id="'+l+'_tr_1"/></td><td  class="input_celda" elinput="'+l+'_tr_2" ><label id="'+l+'_lblr_2">'+fin+'</label><input type="text" style="display:none"  id="'+l+'_tr_2"/></td><td  class="input_celda" elinput="'+l+'_tr_3" ><label id="'+l+'_lblr_3">'+comision+'%</label><input type="text" style="display:none"  id="'+l+'_tr_3"/></td><td><input type="button" class="btn btn-primary eliminar" id="'+l+'" value="Eliminar"/></td></tr>';        
  9.  
  10.         console.log(fila);
  11.        
  12.         document.getElementById("tabla").insertRow(1).innerHTML = fila;
  13.        
  14.        
  15.     }

aqui el detalle es que no se añade tampoco el tr bien
solo se añade
<tr> y no se añade ni la clase pointer ni el onclick
__________________
a veces creemos que es algo básico pero al profundizar nos damos cuenta que estábamos tocando solo la cola de la culebra
  #4 (permalink)  
Antiguo 01/04/2020, 17:50
 
Fecha de Ingreso: abril-2006
Mensajes: 422
Antigüedad: 14 años, 1 mes
Puntos: 94
Respuesta: evento click a elemento agregado despues jquery?

aclaro tu pregunta por que le falta mas detalles, tu problema es que el evento no se ejecuta cuando INSERTAS NUEVOS ELEMENTOS en el dom (tu html) correcto???

ese problema en jQuery se resuelve observando el EVENTO dentro de un PADRE existente antes de la insercion de evento

para clarar seria estos ejemplos
Código HTML:
Ver original
  1. <script>$('.alerta').on('click', function(){
  2.         alert("entro");
  3. });<script>
  4. <button class="alerta"> pulsame pe</button>
ese ejemplo nunca se ejecutara
Código HTML:
Ver original
  1. <button class="alerta"> pulsame pe</button>
  2. <script>$('.alerta').on('click', function(){
  3.         alert("entro");
  4. });<script>
este si ,

ahora que ya se tiene tu problema claro, abstractamente, jQuery te da la forma de tratar con estos elementos Aun no existentes pero que existiran luego los "delegate" con javascript
addEventListener tambien puedes hacerlo pero es mas laborioso, ya que tienes que filtrar el event.target

bueno la solucion de tu problema es que DELEGES el onclick a un padre , puede ser el BODY que la mayoria usa

https://api.jquery.com/delegate/

Código Javascript:
Ver original
  1. $( "body" ).on( ".alert", "click", function() {
  2.   alert("se ejecuta");
  3. });
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.com/pools/c/8lmNLmWnG9
  #5 (permalink)  
Antiguo 01/04/2020, 17:58
 
Fecha de Ingreso: agosto-2012
Ubicación: M.
Mensajes: 2.023
Antigüedad: 7 años, 9 meses
Puntos: 52
Respuesta: evento click a elemento agregado despues jquery?

No se que pasó, ya funciono,

$( "body" ).on( ".alert", "click", function() {
alert("se ejecuta");
});

pero ya lo habia probado y no habia funcionado mmmm

muchas gracias :)
Aqui andare igual apoyando a la comunidad en lo que sepa :)
__________________
a veces creemos que es algo básico pero al profundizar nos damos cuenta que estábamos tocando solo la cola de la culebra



La zona horaria es GMT -6. Ahora son las 07:04.