How to add the product again to the cart or add to cart button not working?

Question

<?php foreach ($memberData as $c) {?>
    <tr>
      <td><?php echo $c->name;?></td>
      <td> 1 year</td>
      <td><div class="calActivitylPrice"> <?php echo $c->Fees;?></div></td>
      <td>
          <div class="display_table"><?php if($c->member_approve==1){?>
          <button type="button" name="renew" class="btn btn-success add_cart" data-productname="membership" data-price="" data-productid="1" />Add to cart</button><?php }else{?><div class="redDot statusDot"></div><div class="activity_status">Not Approved</div><?php };?>
         </div>
      </td>

    </tr>
<?php }?>

The output of the above code is

Alex | 1 Year | 500 | Add to cart
blex | 1 Year | 300 | Add to cart
clex | 1 Year | 200 | Add to cart

Now when the user clicks on Add to cart button then product will add in the cart and button will change from add to cart to remove using jQuery. below is the code of add to cart and change the button from add to cart to remove.

Add to cart

$(document).ready(function(){

 $('.add_cart').click(function(){
  var product_name = $(this).data("productname");
  var product_id = $(this).data("productid");
  var product_price = $(this).closest('tr').find('.calActivitylPrice').text();
  var quantity =1 ;

  var changeToRemoveBTNSec = $(this).closest('tr').find('.display_table');

   $.ajax({
    url:"<?php echo base_url(); ?>Member_controller/addToCart",
    method:"POST",
    data:{product_id:product_id, product_name:product_name, product_price:product_price,quantity:quantity},
    success:function(data)
    {
        var obj = JSON.parse(data);

    $(changeToRemoveBTNSec).html('<button type="button" name="remove" class="btn btn-danger remove_inventory" id="'+obj.removebtn+'">Remove</button>');

     $('#totalDetails').html(obj.cart_total);          
     $('#totalQty').html(obj.totalQty);
    }
   });

 });

});

After adding the product in a cart the I am getting the remove button so my list is

Alex | 1 Year | 500 | Add to cart
blex | 1 Year | 300 | remove
clex | 1 Year | 200 | remove

Now If I click on the remove button then the product is also removed from the cart and button change from remove to add to cart and the script is below

Remove from cart

 $(document).on('click', '.remove_inventory', function(){
  var row_id = $(this).attr("id");
  var changeToAddtocartBTN = $(this).closest('tr').find('.display_table');

  if(confirm("Are you sure you want to remove this?"))
  {
   $.ajax({
    url:"<?php echo base_url(); ?>Member_controller/Removecart",
    method:"POST",
    data:{row_id:row_id},
    success:function(data)
    {
        var obj = JSON.parse(data);
        alert("Product removed from Cart");


      $(changeToAddtocartBTN).html('<button type="button" name="renew" class="btn btn-success add_cart" data-productname=cmembership" data-price="" data-productid="-3">Add to cart</button>');


    }
   });
  }
  else
  {
   return false;
  }
 });

Above scenario is working for me. now I am getting the issue on I am not able to add the product again because add to cart button is not working. because this time it's not getting the product name and all information.

Would you help me out in this issue?

Answer 1

Change your add to cart function from .click to .on

$(document).on('click', '.add_cart', function() {
    var product_name = $(this).data("productname");
    var product_id = $(this).data("productid");
    var product_price = $(this).closest('tr').find('.calActivitylPrice').text();
    var quantity = 1;

    var changeToRemoveBTNSec = $(this).closest('tr').find('.display_table');

    $.ajax({
        url: "<?php echo base_url(); ?>Member_controller/addToCart",
        method: "POST",
        data: {
            product_id: product_id,
            product_name: product_name,
            product_price: product_price,
            quantity: quantity
        },
        success: function(data) {
            var obj = JSON.parse(data);

            $(changeToRemoveBTNSec).html('<button type="button" name="remove" class="btn btn-danger remove_inventory" id="' + obj.removebtn + '">Remove</button>');

            $('#totalDetails').html(obj.cart_total);
            $('#totalQty').html(obj.totalQty);
        }
    });

});