tengo una función en Javascript la cual pretende mostrar en un alert el valor del campo en una tabla, es decir, asociar cada botón con el valor correspondiente a su fila, cabe aclarar que dicha tabla la genero dinamicamente con PHP al terminar de cargar el DOM. supongo que el problema esta en que al asociar el evento click del botón aun no existe dicha tabla, no se como referenciar eventos a elementos dinámicos.
Necesito aprender a hacerlo con javascript puro, sin JQuery
Codigo PHP que genera dicha tabla:
foreach($dataEsc as $de){ echo '
<tr>
<td>'.$de->ID_ESC.'</td>
<td>'.$de->CLAVECCT.'</td>
<td>'.$de->C_NOMBRE.'</td>
<td>'.$de->CV_TIPO.'</td>
<td><button class="cct">Obtener CCT</button></td>
<td>
<select class "disableBoton">
<option class="" value="1">Enviar</option>
<option class="" value="2">No Enviar</option>
</select>
</td>
</tr>';
}
Función Javascript:
const buttonFile = document.getElementsByClassName("cct");
if (buttonFile && buttonFile.length > 0) {
for (let i = 0; i < buttonFile.length; i++) {
buttonFile[i].document.addEventListener("click", showCCT)
}
}
function showCCT(e) {
e.preventDefault();
const documento = e.target.parentNode.parentNode.children[1].textContent;
alert(documento);
}
Elemento donde pinto la tabla HTML:
<body>
<h4>CONTENIDO</h4>
<div id="tabla">
</div>
</body>
Espero puedan ayudarme, gracias.