Fetch Api CRUD

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:

[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:

[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:

[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:

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