Question

我有一张显示订单商品列表的表格。每个row包含3个按钮，将订单数量减1，将订单数量增加1，并从订单中删除整个项目。我有一个奇怪的问题，当我减少特定行的订单数量时，它会导致第二行中存储的值更新......

这是我设置表格的地方：

if($.cookie('order_cookie') != undefined){
    productArray = JSON.parse($.cookie('order_cookie'));
    $.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
}

//Reference to the order table
var ordertable = document.getElementById("ordertable");

    //Loop through the Array and display in the table
    for(var i = 0; i < productArray.length; i ++){
       // console.log(productArray[i]);
        console.log("Order Item " + i);
        console.log("StockCode: " + productArray[i].stockCode);
        console.log("Quantity: " + productArray[i].quantity);

        var row = ordertable.insertRow(i + 1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        cell1.innerHTML = productArray[i].stockCode;
        cell2.innerHTML = productArray[i].quantity;
        cell3.innerHTML = "<input type='button' value='-' class='removeBtn'/><input type='button' value='+' class='addBtn'/><input type='button' value='Delete' class='deleteBtn'/>"
    }

这是我减少表格中项目的订单数量的地方

//Change the total 
$('.removeBtn').click(function(){ //Remove 1 from quantity

    console.log(productArray);
    console.log("remove");
    var row = this.parentNode.parentNode;
    console.log(row);
    console.log(row.rowIndex);
    var elementToUpdate = row.rowIndex - 1;
    productArray[elementToUpdate].quantity--;
    cell2.innerHTML = productArray[elementToUpdate].quantity;
   // $.cookie('order_cookie', JSON.stringify(productArray), { expires: 1, path: '/' });
});

有人能说清楚为什么会这样吗？我认为这可能与我使用Javascript而不是HTML生成表格的事实有关，但我不完全确定。

非常感谢您的帮助

Answer 1

使用event Delegation。你动态添加.removeBtn类

$("#ordertable").on("click" , ".removeBtn" , function(){ 

      // your code come here
});

使用innerHTML更新表格单元时出错

1 个答案: