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
    Commented 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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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