1

Buenas tengo un botón en mi iteración que con el data-id modifico cada linea de la iteración en la base de datos, una modificado recargo el div con load pero la pantalla aparece todo bien, pero en cambio el botón no funciona.

<div class="contenidoPedido" id="">
    <ul>
      @foreach ($mesas as $item)
        <li>
          {{ $item->mesa }}
        </li>
        @foreach ($item->pedidos->groupBy('ticket') as $key => $peds)
           <div class="modulOrder" id="ped_{{ $key }}">
             <span class="indicaPed"><b>{{ $key }}</b></span>
             <hr>
             @foreach ($peds as $item5)
               <div class="fondoPed1">
                 <div class="paraPoint">
                    <div class="tituProducto">{{ $item5->producto }} @if(!$item5->opcion == null) - {{ $item5->opcion }} @endif</div>
                    <div class="subsProducto"><b>CANTIDAD: </b> {{ $item5->cantidad }}</div>
                    <a class="btnListo" data-id="{{ $item5->id }}" data-ticket="{{ $item5->ticket }}">LISTO {{ $item5->id }}</a>
                 </div>
               </div>
             @endforeach 
           </div> 
         @endforeach
      @endforeach
     </ul>
    </div>
  </div>
</div>

Luego con onclick obtengo el data-id del botón que pulso

$(".btnListo").on('click', function() {
    var idProducto = $(this).data("id");
    var ticket = $(this).data("ticket");
    console.log(idProducto);
});

Pero solo me funciona una vez, una vez ejecutado y actualizado ya no funciona.

2
  • 1
    Cuando se carga la página, el botón existe y se puede asignar el evento. Luego remplazas el contenido y el navegador interpreta todo de nuevo; el botón que aparece no es el mismo que estaba originalmente y es por eso que ya no tiene el evento. La solución propuesta en la respuesta que te dieron es muy buena, porque se "delega" el evento al contenedor padre y no importa si el botón existía o apareció posteriormente.
    – Triby
    Commented el 23 nov. 2021 a las 19:32
  • Gracias @Triby ya lo probe y funciona perfecto!
    – Miguel
    Commented el 23 nov. 2021 a las 20:08

1 respuesta 1

2

Prueba lo siguiente:

$(".contenidoPedido").on('click', 'a.btnListo',function(e) {
e.preventDefault();
    var idProducto = $(this).data("id");
    var ticket = $(this).data("ticket");
    console.log(idProducto);
});

De esta forma estarás "bindeando el evento click a todas las etiquetas a con clase "btnListo" que se encuentran dentro del div contenidoPedido. Parece lo mismo pero no, el contenido dinámico agregado como parte de una respuesta Ajax, mantendrá el enlace a los eventos definidos.

1
  • Muchas gracias @Francisco funciono perfecto!!
    – Miguel
    Commented el 23 nov. 2021 a las 20:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.