Estoy intentando hacer una llamada una API, que me devuelve una serie de datos en JSONP. Luego creo una serie de filas con varios campos y por último el usuario debe seleccionar una de esas filas pinchando sobre ella y debo recuperar el valor de una de las celdas.
He llamado #res al tbody de la tabla.
Mi problema es que una vez que hago click sobre alguna de la filas, no logro recuperar el valor de la celda con clase "identificador" , que es la que necesito. El código es el siguiente.
i
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://www.cartociudad.es/geocoder/api/geocoder/candidatesJsonp?q=calle%20iglesia%205,%20madrid&limit=4",
data: "data",
dataType: "JSONP"
})
.done (function (data) {
let direcciones=data;
let tabla=$('#tabla');
direcciones.forEach(direccion => {
var tr = document.createElement('tr');
tr.innerHTML = '<td class="identificador">' + direccion.id+ '</td>' +
'<td>' + direccion.address + '</td>' +
'<td>' + direccion.stateMsg + '</td>';
tabla.append(tr);
});
});
$('#res').click(function() {
var Fila=$(this).closest('tr');
var Identificador=Fila.find(".identificador").text();
console.log(Identificador);
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form-group">
<input type="text" name="inputCand" class="form-group" id="inputCand" placeholder="e.g Rúa Roma, 6 15707 Santiago de Compostela">
<button class="btn btn-default" type="submit" id="inputCandButton" title="Buscar candidatos">Buscar</button>
</div>
</div>
<div class="container">
<table id="tabla" class="table table-striped">
<thead>
<tr>
<th>Identificador</th>
<th>Dirección</th>
<th>Municipio</th>
</tr>
</thead>
<tbody id="res">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="main copy.js"></script>
</body>
</html>