Fetch Api CRUD

[iCoke]

Lo que estoy intentando es dejar de usar JQUERY para las consultas asincronas, para eso decidi usar la API Fetch de JS , mi problema consiste en que una vez devuelto los datos de la BD , a la tabla en la cual se muestran estos datos no le funciona el boton "EDITAR"


index.php aca listo los productos con sus respectivos botones EDITAR y ELIMINAR (FUNCIONAN)

Código [Seleccionar] Expandir

[code=html4strict]<div id="verTablaPremium">Tabla Premium</div>
              <div class="contenedor_tabla">
                <table class="contenedor_tabla_table">
                  <tr>
                    <th>Foto</th>
                    <th>Nombre</th>
                    <th>Pack</th>
                    <th>Desc Menu</th>
                    <th>Desc Producto</th>
                    <th>Precio</th>
                    <th>Editar</th>
                    <th>Eliminar</th>
                  </tr>
                  <?php
                  $item = null;
                  $valor = null;
                  $cPacks = ControladorPacks::ctrMostrarPacks($item,$valor);

                  foreach ($cPacks as $key => $value) {
                        echo '<tr>
                              <td><img src="./vistas/img/packspremium/'.$value["nombre"].'+'.$value["pack"].'/320/'.$value["foto"].'"></td>
                              <td>'.$value["nombre"].'</td>
                              <td>'.$value["pack"].'</td>
                              <td>'.$value["descripcion"].'</td>
                              <td>'.$value["descripciondos"].'</td>
                              <td>'.$value["precio"].'</td>
                              <td><button class="botones__editar btnEditarPack"  idPack="'.$value["id_premium"].'"> <i class="fas fa-pencil-alt"></i></button></td>
                              <td><button class="botones__eliminar btnEliminarBurguer" idBurguer="'.$value["id_premium"].'" fotoBurguer="'.$value["foto"].'" nombreBurguer="'.$value["nombre"].'" pack="'.$value["pack"].'"> <i class="fas fa-trash-alt"></i></button> </td>
                              </tr>';
                  }
                  $borrarBurguer = new ControladorPacks();
                  $borrarBurguer -> ctrBorrarBurguer();
                  ?>
                </table>[/code]


Luego en mi JS para hacer la llamada a la db tengo esto.

Código [Seleccionar] Expandir

[code=javascript]var formulario = document.getElementById("formEnkel")
var tr = document.getElementById("refresh")
let boton = Array.from(document.querySelectorAll('.btnEditarPackEnkel'))

let evento = e =>{
  /* relleno el formulario del modal con los datos traidos de la BD */
  if(e.target.tagName == "I"){
    idPackEnkel = e.target.parentNode.getAttribute("idPackEnkel");
 
    let datos = new FormData(formulario);
 
    datos.append("idPackEnkel", idPackEnkel);
 
    //console.log(datos.get('idPackEnkel'))
 
    fetch("ajax/enkel.ajax.php",{
      method:"POST",
      body:datos
    })
    .then( res => res.json())
    .then( data => {
      document.getElementById('fotoActualBEnkel').value = data.foto
      document.getElementById('editarNombrePEnkel').value = data.nombre
      document.getElementById('editarDescripcionEnkel').value = data.descripcion
      document.getElementById('editarDescripcionDosEnkel').value = data.descripciondos
      document.getElementById('id_enkel').value = data.id_enkel
      document.getElementById('nombreActualEnkel').value = data.nombre
     
      if(data.foto != ""){
        document.querySelector('.previsualizarBEnkel').setAttribute("src","./vistas/img/packsenkel/"+data.nombre+"/320/"+data.foto+"")
      }
    })
  }
}


tr.addEventListener('click',evento,true);

   
/* CUANDO hago el submit traigo la respuesta de la db para llenar la tabla con los datos actualizados  */

formulario.addEventListener('submit',(e) =>{
  e.preventDefault();
  let datos = new FormData(formulario);

  fetch("ajax/submit.ajax.php",{
    method:"POST",
    body:datos
  })
  .then( res => res.text())
  .then(data =>{
   formulario.reset();
   tr.innerHTML = data;


  })

 
})[/code]


SUBMIT.AJAX.PHP

Código [Seleccionar] Expandir

[code=php]<?php

require_once "../controladores/enkel.controlador.php";
require_once "../modelos/enkel.modelo.php";

$e = new ControladorPacksEnkel();
$e->ctrEditarEnkel();
[/code]

en el controlador que devuelve todos los datos actualizados en cuestion tengo esto

Código [Seleccionar] Expandir

[code=php]$respuesta = ModeloPacksEnkel::mdlEditarEnkel($tabla, $datos);

if($respuesta == "ok"){
  $item = null;
                  $valor = null;
  $ePacks = ControladorPacksEnkel::ctrMostrarPacksEnkel($item,$valor);
  echo ' <tr>
  <th>Foto</th>
  <th>Nombre</th>
  <th>Desc Menu</th>
  <th>Desc Prod</th>
  <th>Precio</th>
  <th>Editar</th>
  <th>Eliminar</th>
</tr>';
foreach ($ePacks as $key => $value) {
echo '<tr>

                              <td><img src="./vistas/img/packsenkel/'.$value["nombre"].'/320/'.$value["foto"].'"></td>
                              <td>'.$value["nombre"].'</td>
                              <td>'.$value["descripcion"].'</td>
                              <td>'.$value["descripciondos"].'</td>
                              <td>'.$value["precio"].'</td>
                              <td><button class="botones__editar btnEditarPackEnkel"  idPackEnkel="'.$value["id_enkel"].'"> <i class="fas fa-pencil-alt"></i></button></td>
                              <td><button class="botones__eliminar btnEliminarBurguerEnkel" idBurguerEnkel="'.$value["id_enkel"].'" fotoBurguerEnkel="'.$value["foto"].'" nombreBurguerEnkel="'.$value["nombre"].'"> <i class="fas fa-trash-alt"></i></button> </td>
  </tr>

  ';
  };

}
[/code]


repito, la primera vez que apreto en editar funciona, despues hago el submit, los datos se muestran perfectamente pero el boton editar no funciona, lei algo de la propagacion de eventos y que con jquery se soluciona con el evento " .ON ". pero no le encuentro la solucion , desde ya muchas gracias.