Este es un problema (en realidad es un feature) bien conocido como "Clousure dentro de un loop".. y se da cuando declaras una funcion dentro de un loop.
Hay varias formas de solucionarlo. La mas simple es usar let
en lugar de var
. El asunto es que las variables declaradas con var
son globales a la función y debido a esto todos los handlers acaban apuntando al mismo valor (como si de punteros se tratara), es decir que todos los botones apuntan al ultimo valor que tomo la variable i
. Pero let
opera diferente y cada iteración del bucle usa una instancia diferente de la variable.
ejemplo:
for(let i in cart) {
// .. restro del codigo
}
Pero si necesitas que funcione en navegadores Legacy, esta opción no servirá pues fue agregada recientemente en ES2015.
En ese caso deberías usar una función externa para cambiar el scope de la variable i
.
algo asi como
for(var i in cart) {
otrafuncion(i);
}
// luego fuera del loop, creas la función otraFuncion con el código que ya tenias.
function otraFuncion(i) {
// restro del codigo aqui.
}
saludos.
EDICIÓN:
Mismo ejemplo que reproduce el problema que tienes (arreglada la parte de #someArea):
$(function() {
var cart = [{
id: 1,
Product: "Papa negra",
Qty: 10,
Price: 10.3
}, {
id: 2,
Product: "Papa blanca",
Qty: 5,
Price: 15.9
},{
id: 3,
Product: "Papa falsa",
Qty: 5,
Price: 3.9
}];
function deleteItem(index) {
alert(index);
//cart.splice(index, 1);
//mostrar_carrito();
}
function mostrar_carrito() {
$("#cart").css("visibility", "visible");
$("#cartBody").empty();
for (var i in cart) {
var item = cart[i];
var row = "<tr><td>" + item.Product + "</td><td>" +
item.Price + "</td><td>" + item.Qty + "</td><td>" +
item.Qty * item.Price + "</td><td id='item" + item.id + "'/>";
$("#cartBody").append(row);
var button = document.createElement("button");
button.innerHTML = "borrar";
button.addEventListener("click", function() {
deleteItem(i);
});
$("#item" + item.id).append(button);
}
}
mostrar_carrito();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cart">
<table id="cartBody">
</table>
</div>
y La Solución, usando el método de extraer la función:
$(function() {
var cart = [{
id: 1,
Product: "Papa negra",
Qty: 10,
Price: 10.3
}, {
id: 2,
Product: "Papa blanca",
Qty: 5,
Price: 15.9
}, {
id: 3,
Product: "Papa falsa",
Qty: 5,
Price: 3.9
}];
function deleteItem(index) {
alert(index);
//cart.splice(index, 1);
//mostrar_carrito();
}
function mostrar_carrito() {
$("#cart").css("visibility", "visible");
$("#cartBody").empty();
for (var i in cart) {
creaRegistro(cart[i], i);
}
function creaRegistro(item, index) {
var row = "<tr><td>" + item.Product + "</td><td>" +
item.Price + "</td><td>" + item.Qty + "</td><td>" +
item.Qty * item.Price + "</td><td id='item" + item.id + "'/>";
$("#cartBody").append(row);
var button = document.createElement("button");
button.innerHTML = "borrar";
button.addEventListener("click", function() {
deleteItem(index);
});
$("#item" + item.id).append(button);
}
}
mostrar_carrito();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cart">
<table id="cartBody">
</table>
</div>
Otro ejemplo con let
$(function() {
var cart = [{
id: 1,
Product: "Papa negra",
Qty: 10,
Price: 10.3
}, {
id: 2,
Product: "Papa blanca",
Qty: 5,
Price: 15.9
},{
id: 3,
Product: "Papa falsa",
Qty: 5,
Price: 3.9
}];
function deleteItem(index) {
alert(index);
//cart.splice(index, 1);
//mostrar_carrito();
}
function mostrar_carrito() {
$("#cart").css("visibility", "visible");
$("#cartBody").empty();
for (let i in cart) {
var item = cart[i];
var row = "<tr><td>" + item.Product + "</td><td>" +
item.Price + "</td><td>" + item.Qty + "</td><td>" +
item.Qty * item.Price + "</td><td id='item" + item.id + "'/>";
$("#cartBody").append(row);
var button = document.createElement("button");
button.innerHTML = "borrar";
button.addEventListener("click", function() {
deleteItem(i);
});
$("#item" + item.id).append(button);
}
}
mostrar_carrito();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cart">
<table id="cartBody">
</table>
</div>