0

Estoy tratando obtener el id de unos elementos "a", tanto el div con clase message y las etiquetas a son generados dinámicamente, pero al momento de tomar o tratar de tomar el id me dice que no está definido, este es el codigo que estoy usando:

$(document).ready(()=>{
  
  $('body').on("click", '.message', function(){
    selectedDiv = $(this).parents('.message');
    console.log(selectedDiv);
    console.log(selectedDiv.find("a.materia").attr('id'));
    var codigo_materia= selectedDiv.find("a.materia").attr('id');	
  });
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id="principal">
    <div id="mensaje">
      <strong>
           <a class="mensaje" id="1">ROBERTO CAMPY ORTEGA </a><a id="totalmsg">2</a>
      </strong>
      <div class="message">
          <a class="materia" id="1">COGNITIVA MATEMÁTICA</a><a> 1</a><br/> 
          <a class="materia" id="2">COGNITIVA PROYECTO</a><a> 1</a><br/>         
      </div>
    </div>
  </div>
</body>

y esto es lo que me muestra la consola.

introducir la descripción de la imagen aquí Como pueden observar el resultado que me da undefined y me deberia mostrar el valor de cada id, agradeceria mucho la ayuda que me puedan dar.

Gracias

7
  • Hola @Riven, gracias por la corrección, me podrias echar una mano??? Commented el 30 may. 2020 a las 4:38
  • Es que... aun no se lo que pasa, porque yo intento reproducir el problema pero a mi el código cuando lo reproduzco ni me funciona xd, o al menos la parte del listener.
    – Layer
    Commented el 30 may. 2020 a las 4:47
  • @Riven del div message hacia abajo lo hago con un php, tal vez por eso te funciona, trate de usar la misma solucion que me dieron dias anteriores con algo similar pero no funciono Commented el 30 may. 2020 a las 4:49
  • De hecho nada que ver... puesto que aqui en el ejemplo que pusiste no hay php asi que no deberia fallar...
    – Layer
    Commented el 30 may. 2020 a las 4:53
  • exacto y aun asi falla, y no se por que Commented el 30 may. 2020 a las 4:54

2 respuestas 2

2

Por falta mía de conocimiento de jQuery, te propongo la solución con vanilla JavaScript. Que no es mejor ni peor, sólo otra forma.

$(document).ready(() => {
  $('body').on('click', '.message', function() {
    // this ya es el componente seleccionado
    // querySelectorAll traerá todos los elementos
    // de tipo anchor (a) con la clase materia
    const nodeList = this.querySelectorAll('a.materia');

    // Para poder usar métodos propios del Array prototype
    // convetimos la NodeList a un array nativo
    const elements = Array.from(nodeList);
    // Para cada elemento, sacamos su id
    const ids = elements.map(el => el.id);
    console.log(ids);
  });
});

La explicación del código está en el mismo.

Espero que sirva.

1
  • He preferido mantener las dos líneas de código del OP para alterar así lo más mínimo. Cuando digo la solución en vanilla JavaScript me refiero explícitamente a aquello que pregunta el OP y no su entorno, @BetaM
    – VRoxa
    Commented el 30 may. 2020 a las 3:31
0

El problema está en el uso de parents. Estás colocando para que, luego de hacer click en .message, se busque un elemento que contiene al que hiciste click, cuando lo que realmente te interesa es el elemento en sí, al que se le está haciendo click. (En otras palabras, estás buscando un elemento que no existe, ya que el div con clase message no tiene ningún padre con la clase message.)

Solo intercambia la línea

selectedDiv = $(this).parents('.message');

por

selectedDiv = $(this);

y ya.

Ahora, esto solo te va a tirar el id "1" en el console.log, ya que solo te devuelve el primer resultado de find. Si quieres que los devuelva todos, tendrás que hacerle un each al resultado de find.

$('body').on("click", '.message', function() {
    var selectedDiv = $(this);
    selectedDiv.find("a.materia").each(function() {
        console.log($(this).attr("id"));
    });
});

Por último, si lo que realmente buscas es que el console te tire únicamente el id del <a> al que se le hizo click, puedes colocar el listener directamente a esos elementos, sin tener que ponérselo a .message.

$('body').on("click", '.materia', function() {
    console.log($(this).attr("id"));
});
1
  • 1
    Hola @iamrjgs, gracias por tu ayuda, la solucion que me sirvio fue la última Commented el 30 may. 2020 a las 18:26

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.