Ajax Increasing the number on the cart only works once

Question

I have a page for increasing and decreasing the quantity of goods on a cart before going to the verification confirmation page. Actually im doing with ajax, and then at the back end will be manipulating the quantity of the product based on the button that I pressed (it has product_id).

The problem is that Ajax works well for the first time, and then I refresh the table (not the whole page). But, when I press the button again. It does not return anything. BUT, after refreshing the page with F5, and then press the button again, the quantity is updated.

Could you show me the correct ways to solve this problem? (PS: I'm sorry for my English)

Ajax call:

$(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");
        });
    });

, im , havent .

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>';

Backend (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'] ++;
}

Answer 1

, .btn, #mycart div, , .load() DOM, div, DOM.

, //:

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

Answer 2

, .btnPlus

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

Answer 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>

Go to the /design/frontend/YourTheme/default/template/checkout/cart/item/default.phtml application and paste this code in line 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>