Ajax 在购物车上增加数量只工作一次答案

【问题标题】：Ajax Increasing Quantity on Cart only Work OnceAjax 在购物车上增加数量只工作一次
【发布时间】：2015-06-29 18:15:51
【问题描述】：

在去结账确认页面之前，我有一个页面来增加和减少购物车上的产品数量。其实我是用ajax做的，然后后端会根据我点击的按钮（它有product_id）来执行操作产品的数量。

问题是，第一次 ajax 运行良好，然后我刷新表（不是整个页面）。但是，当我再次单击该按钮时。它什么也不返回。但是，在我使用 F5 刷新页面然后再次单击按钮后，数量会更新。

你能告诉我解决这个问题的正确方法吗？（PS：对不起我的英语）

Ajax 调用：

$(document).ready(function () {
    //Increase quantity on cart
    $(".btnPlus").on('click', function () {
        var id = $(this).val();
        var url = "CRUD member/update-checkout-plus.php";
        var postdata = {"id": id};
        $.post(url, postdata, function (html) {
            $("#myCart").load(location.href + " #myCart");
        });
    });

这是按钮，我只为按钮加号工作，减号按钮我还没有这样做。

echo '<td style="text-align: center">'
        . '<button class="btnPlus" value="' . $item['id'] . '"><span class="glyphicon glyphicon-plus"></span></button>'
        . '<input type="text" class="fieldQty" value="' . $item['qty'] . '" style="text-align: center" size="2" readonly/>'
        . '<button class="btnMinus" value="' . $item['id'] . '"><span class="glyphicon glyphicon-minus"></span></button>'
        . '</td>';

后端（update-checkout-plus.php）：

include '../../config.php';

$id = $_POST['id'];
$query = mysql_query("SELECT stock FROM products WHERE product_id = '$id'");
$row = mysql_fetch_array($query);
$stock = $row['stock'];

//if the quantity has reached maximum of stock (DB)
//quantity == $stock
//else quantity++
if ($_SESSION['cart'][$id]['qty'] >= $stock) {
    $_SESSION['cart'][$id]['qty'] = $stock;
} else {
    $_SESSION['cart'][$id]['qty'] ++;
}

【问题讨论】：

你必须通过 add after append 来绑定你的点击事件函数
@AjeetKumar 你能给出例如代码吗？我应该对上面给出的代码进行哪些更改？

标签： javascript php jquery ajax

【解决方案1】：

在我看来，你有一个类 .btn 驻留在 #mycart div 中，每次 .load() 更改 DOM 时，新元素进入 div 并导致旧绑定从DOM。

所以在这种情况下，您必须将事件委托给最近的静态父/文档/正文：

$(document).on('click', '.btnPlus', function () {

【讨论】：

这适用于所有 ajax 注入的 html。因此，每当您添加要操作的 html 时，请确保您像这样专门绑定，否则您将不得不调用一个函数来重新绑定新元素！

【解决方案2】：

调用此函数，在其中添加 .btnPlus

function bindAddToCart(){
        $(document).on('click', '.btnPlus', function () {
            //your click functionality
        });
    }

【讨论】：

【解决方案3】：

转到 YourTheme/templates/checkout/cart.phtml 并粘贴以下代码：

<script type="text/javascript">
function changeItemQuantity( qty,num,cartid) {        
    var num = num;
    var cartid = cartid;
    var quantity = document.getElementById(cartid).value
    /* Restrict Quantity as a Non Negative */ 
    quantity = Math.max(1, quantity);

    var currentVal = parseInt(quantity);
    var final_val = currentVal + num;
    document.getElementById(cartid).value=final_val;
}    
</script>

转到 app/design/frontend/YourTheme/default/template/checkout/cart/item/default.phtml 并将此代码粘贴到第 207 行：

<a class="mobile-only" onclick="changeItemQuantity(<?php echo $this->getQty() ?>,-1,<?php echo $_item->getId()?>); return false;" href="#"> - </a>

    <label class="mobile-only m-text"><?php echo $this->__('QTY') ?></label>  

        <input name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" title="<?php echo $this->__('Qty') ?>" id="<?php echo $_item->getId()?>" class="input-text qty" maxlength="12" />

     <a class="mobile-only" onclick="changeItemQuantity(<?php echo $this->getQty() ?>,1,<?php echo $_item->getId()?>); return false;" href="#"> + </a>

【讨论】：

【解决方案4】：

添加 location.reload() 看下面的代码：

$('.cart_quantity_up').click(function(){
    var id=$(this).attr("pid").toString();
    var pls=this.parentNode.children[1]
    console.log(pls)
    console.log(id)
    $.ajax({
        type:"GET",
        url:"/pluscart/",
        data:{
            prod_id:id
        },
        success:function(data){
            pls.innerText=data.quantity
            location.reload()
        }


    })
});

【讨论】：