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

时间:2015-04-22 08:21:08

标签: javascript php jquery ajax

在进入结帐确认页面之前,我有一个页面可以增加和减少购物车上的数量产品。实际上我正在使用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'] ++;
}

3 个答案:

答案 0 :(得分:3)

在我看来,你有一个.btn div的#mycart类,每当你.load()改变DOM,所以新元素进入div并导致旧的绑定从DOM中删除。

因此,在这种情况下,您必须将事件委托给最近的静态父/文档/正文:

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

答案 1 :(得分:0)

调用此函数,在其中附加.btnPlus

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

答案 2 :(得分:-1)

转到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>