0

Tengo una lista que se genera con un enlace y quiero que al hacer clic en un li de esta lista aparezca un alert.

Tengo esto pero no funciona

$(document).ready(function() {
  $("a").on("click", function(){
    $(".add").append('<ul class="lista">' +
          '<li>Coffee</li>' +
          '<li>Tea</li>' +
          '<li>Milk</li>' +
        '</ul>'
    );
  });

    $(".lista li").on("click", function(){
        alert("test");
    });

});
1
  • 1
    Esta pregunta la has hecho dos veces, considera eliminarla.
    – user108089
    el 24 ene. 2019 a las 8:18

2 respuestas 2

1

Puedes también llamar al evento on después de hacer el append. En ese momento ya tienes tus elementos en el DOM por lo que puedes asociarles el evento click:

$(document).ready(function() {
  $("a").on("click", function(){
    $(".add").append('<ul class="lista">' +
          '<li>Coffee</li>' +
          '<li>Tea</li>' +
          '<li>Milk</li>' +
        '</ul>'
    );
    
     $(".lista li").on("click", function(){
        alert("test");
    });
  });

   

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>asdf</a>
<div class="add"></div>

0

Eso es porque son elementos creados dinámicamente, es decir que no lo alcanzas normalmente ya que fueron insertados en un segundo momento en el DOM.

Para llegar a esos botones tendrias que hacer lo siguiente:

$(document).ready(function(){

      $("#table").append("<tr><td><button id='enviar' type='button'>enviar</button></td></tr>");

      $("#table").on("click", "#enviar", function(){
          console.log("dato enviado");
      });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
</table>

para incorporarlo en tu codigo tendrias que hacer lo siguiente :

$("#IdElementoPadre").on("click", "#IdTarget", function(){});

en cual el elemento padre tiene que ser un elemento que este presente en el DOM, osea ya definido en el HTML y el target sería el botón.

Funciona también con clases, exitos.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.