Как снова добавить товар в корзину или кнопка «Добавить в корзину» не работает?

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 }?>

Вывод вышеуказанного кода

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

Теперь, когда пользователь нажимает кнопку Add to cart, товар добавляется в корзину, а кнопка изменится с add to cart на remove с помощью jQuery. ниже приведен код добавления в корзину и изменения кнопки с add to cart на remove.

Добавить в корзину

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

 });

});

После добавления товара в корзину я получаю кнопку удаления, поэтому мой список

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

Теперь Если я нажму на кнопку удаления, продукт также будет удален из корзины, и кнопка изменится с remove на add to 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;
  }
 });

Выше сценарий работает для меня. Теперь я получаю сообщение о том, что не могу добавить продукт снова, потому что кнопка add to cart не работает. потому что на этот раз он не получает название продукта и всю информацию.

Не могли бы вы помочь мне в этом вопросе?

Answer 1

Измените функцию добавления в корзину с .click на .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);
        }
    });

});