0

Al parecer cuando escucho la acción del buton con la clase eliminar si realiza la accion pero el $(this) me retorna r.fn.init [Window] y no sé por qué.

Este es mi html:

              <form id="task-form">
                <div class="form-group">
                  <input type="number" id="id" placeholder="codigo" class="form-control">
                </div>
                <div class="form-group">
                  <input type="number" id="cantidad" placeholder="cantidad" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary btn-block text-center">
                  Agregar
                </button>
              </form>


        <div class="col-md-7">
       <div class="bg-white">
          <table class="table table-bordered table-sm">
            <thead>
              <tr>
                <td>N°</td>
                        <td>Codigo</td>
                <td>Producto</td>
                <td>Cantidad</td>
                        <td>Precio</td>
                <td>Total</td>
              </tr>
            </thead>
            <tbody id="tasks"></tbody>
          </table>
        </div>
      </div>

Aquí comienzan mis scripts y establezco el contenido de mi tabla:

let productos ='';
let i = 1;
$('#task-form').submit(e => {
	e.preventDefault();
		const postData = {
			id: $('#id').val(),
			cantidad: $('#cantidad').val(),
	};
	console.log(postData);
	$.post("<?=base_url?>listar.php", postData, (response) => {
		const prod = JSON.parse(response);
		console.log(prod);
        prod.forEach(prod => {
          productos += `
                  <tr taskId="${i}">
                  <td>${i}</td>
                  <td>${prod.nombre}</td>
                  <td>${prod.cantidad}</td>
				  <td>${prod.precio}</td>
                  <td>${prod.total}</td>
                  <td>
                    <button class="eliminar btn btn-danger">
                     Delete 
                    </button>
                  </td>
                  </tr>
                `
			});
      i++;
        $('#tasks').html(productos);
		$('#task-form').trigger('reset');
	});
})

Este script llama al elemento que me está desencadenando la acción:

$(document).on('click', '.eliminar', (e) => {
    if(confirm('Are you sure you want to delete it?')) {
      console.log($(this));
    }
  });

Quiero escuchar el botón que que me está mandando la accion o evento el cual tiene la clase eliminar pero el $(this) me retorna r.fn.init [Window]

Este es el archivo listar.php en el cual leo el json y lo envío en modo string:

Conexión a base de datos:

include('conec.php');

Guardo las variables enviadas por post:

$id = $_POST['id'];

$cantidad = $_POST['cantidad'];

Valido los datos en una consulta:

$query = "SELECT * from productos WHERE id_prod=$id";
$result = mysqli_query($con, $query);



  if(!$result) {
die('Query Failed'. mysqli_error($con));
}

Si es válido realizo el siguiente proceso donde recorro el objeto de consulta y asigno a cada propiedad de mi objeto un valor de los campos de la variable de consulta.

Inicio el json:

$json= array();

ahora recorro las filas

while($row = mysqli_fetch_array($result)) {
$json[] = array(
    'id' => $row['id_prod'],
    'nombre' => $row['nombre_prod'],
    'precio' => $row['precioV_prod'],
    'cantidad' => $cantidad,
    'total' => (($cantidad)*($row['precioV_prod']))
); 
}  

Ahora lo retorno al script:

$jsonstring = json_encode($json);
echo $jsonstring;
3
  • Si quieres ayuda, podrias compartir el codigo con el cual estas trabajando.
    – jolsalazar
    el 31 may. 2019 a las 16:06
  • ok ahora lo hago
    – jorge
    el 31 may. 2019 a las 16:16
  • puedes obtener el elemento seleccionado cambiando $(this) por e.target que es lo mismo!
    – Bryro
    el 31 may. 2019 a las 16:43

1 respuesta 1

1

Para obtener el boton seleccionado tendrias que utilizar la funcion de esta forma, en este caso para poder utilizar el this no debes usar la funcion de fecha.

$(document).ready(function(){

$(document).on('click', '.eliminar', function() {
    let id = $(this).data('id');
    console.log('Ejemplo 1', id, $(this));
  });
  
  
$(document).on('click', '.eliminar', (e) => {
    let id = $(e.currentTarget).data('id');
    console.log('Ejemplo 2 con function => ',id, $(this));
  });  
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="eliminar" data-id="1">Boton 1</button>
<button class="eliminar" data-id="2">Boton 2</button>

En el ejemplo 2 para utilizarlo con la funcion de fecha, deberas obtener el boton de esta forma e.currentTarget

espero te sirva.

6
  • me sirvio ahora ¿puedo usar parent para llegar al padre que tenga un id especifico let id = $(this).data('id').activeElement.parentElement.parentElement; const ele = $(id).attr('taskId');
    – jorge
    el 31 may. 2019 a las 16:47
  • edite mi respuesta, para que puedas utilizar la funcion de fecha, oteniendo el boton con e.currentTarget, saludos
    – jolsalazar
    el 31 may. 2019 a las 16:48
  • como obtengo en este mismo codigo en td que tiene el taskId="${i}"
    – jorge
    el 31 may. 2019 a las 17:04
  • como obtengo en este mismo codigo en td que tiene el taskId="${i}"
    – jorge
    el 31 may. 2019 a las 17:05
  • te recomiendo mejor agregar un data al boton como en el ejemplo, en vez de agregarselo al tr, seria data-id="${i}" en el boton
    – jolsalazar
    el 31 may. 2019 a las 17:08

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.