Tengo una function javascript que me retorna un template html creado con ello no tengo problema, luego de que se renderice el componente en la vista tengo otra function que me obtiene datos cargados de ese html pero mi problema es que la primera vez al obtener datos me obtiene vacio y luego al volverlo a ejecutar recien me carga con los valores que deberia tener.
function templateTablePaint(data)
{
return(`
<tr>
<td>${data.mesa_id}</td>
<td>${data.descripcion}</td>
<td class="sumth">${data.precio * data.cantidad}</td>
<td>${data.cantidad}</td>
<td> <button type="button" class="btn btn-info btn-simple btn-sm" onclick="sumarPlato(${data.iddetallemesa})"><i class="fa fa-plus-square"></i></button></td>
<td> <button id="btn-less" type="button" class="btn btn-secundary btn-default btn-sm" onclick="restarPlato(${data.iddetallemesa})"><i class="fa fa-minus"></i></button></td>
<td> <button type="submit" class="btn btn-danger btn-simple btn-sm" onclick="borrarPlato(${data.iddetallemesa})"><i class="fa fa-trash"></i></button></td>
</tr>
`);
}
esa function crea mi componente y quiero leer los datos de la clase ".sumth" lo cual cree otra function
function sumarCampos()
{
const money = 0;
const precio = document.querySelectorAll('.sumth');
console.log(precio);
}
pero la primera vez que se ejecuta me obtiene vacio sin datos, lo vuelvo a ejecutar y me muestra los datos como puedo hacer para leer los datos una vez creado ya que estas funciones las llamo en orden primero creo luego leo. Gracias