evento click a elemento agregado despues jquery?

[minombreesmm]

Código Javascript:

$('.alerta').on('click', function(){
            
        alert("entro");
 
 
        });
 

pero no entra y ya genere otro elemento con esa clase, y no reacciona, asi es como se hace?

[Triby]

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.

[minombreesmm]

Iniciado por Triby

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:

function agregar(inicio,fin,comision,l){
        
 
        onclickk='class="pointer" onclick="seleccionar_rango_l(\''+inicio+'\',\''+fin+'\',\''+comision+'\')"';
 
        trr = '<tr '+onclickk+'>';//PENDIENTE
 
        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>';        
 
        console.log(fila);
        
        document.getElementById("tabla").insertRow(1).innerHTML = fila;
        
        
    }
 

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

[tuadmin]

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:

<script>$('.alerta').on('click', function(){
        alert("entro");
});<script>
<button class="alerta"> pulsame pe</button>
 

ese ejemplo nunca se ejecutara

Código HTML:

<button class="alerta"> pulsame pe</button>
<script>$('.alerta').on('click', function(){
        alert("entro");
});<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:

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

[minombreesmm]

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 :)