nagibator4500 nagibator4500 - 1 month ago 9
jQuery Question

How to refresh div repeatedly without duplicating?

<div id="result" class="cart-content">
[_divmenu]
<div id="cartid" class="cart-one-goods">
<img src="../templates/img/[_image]" alt="товар" class="cart-img-goods">
<h3 class="cart-name-goods">[_name]</h3>
<button class="cart-btn btn-plus" data-id=[_id] data-qu=[_quantity]></button>
<input class="cart-number-goods" value="[_quantity]" type="text">
<button class="cart-btn btn-minus" data-id=[_id] data-qu=[_quantity]></button>
<p class="cart-price-goods">[_summary] р.</p>
<button class="cart-btn cart-delete" data-id=[_id]></button>
</div>
[_divmenu]




$(document).ready(function(){
$(".cart-one-goods").on('click', '.btn-plus', function(){
id = $(this).attr("data-id");
qu = $(this).attr("data-qu");
$.ajax({
type: "POST",
url: '../moduls/plus-minus-cart.php',
data: {
idtovara: id,
quant: qu,
plus: 'plus'
},
success: function(data) {
$("#result").load(location.href+ ' #cartid');
}
});
});
});


After click button data in div 'result' update only one time.

How to change this code to update div every time clicking button?

Answer Source

Based on Reference:- Understanding Event Delegation jQuery

Since cart-one-goods div is inside result container that's why after first refresh it's not working

Do like below:-

$(".cart-content").on('click', '.cart-one-goods .btn-plus', function(){
    id = $(this).attr("data-id");
    qu = $(this).attr("data-qu");
    $.ajax({
        type: "POST",
        url: '../moduls/plus-minus-cart.php',
        data: {
            idtovara: id, 
            quant: qu,
            plus: 'plus'
        },
        success: function(data) {
                $("#result").load(location.href+ ' #cartid');
        }
    });
});

Note:-

If $(".cart-content").on('click', '.btn-plus', function(){ not worked then try $(document).on('click', '.btn-plus', function(){