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