javascript - Laravel 使用 Ajax 从购物车中删除

Question

我想使用Ajax从购物车中删除，我添加没有问题，但是当我有很多项目并且可能需要一项一项删除时，如何在不刷新页面的情况下删除，我从删除功能传递html在 Controller 中查看 Blade ，因此当我第一次进入该页面时，它会删除，但删除一个项目后无法删除更多项目

 <script>
 $(function(){ 
  $('.remove_item').on("click", function () { 
  var id = $(this).data('id'); 
  $.ajax({
         type: 'DELETE',
         url: "cart/"+ id,  
         data: {'_token': $('input[name=_token]').val()},
         success: function (data) {
           $('#cart_product').html(data);        
         }               
    });
   });
 });
</script>

在 Controller 中删除

public function destroy($id)
{
     Cart::remove($id);
     $products = Cart::content();
     foreach($products as $Product){

     echo '<div class="OrderItem_root styles_base styles_spacing-base">
           <div class="OrderItem_quantity styles_just-right styles_base 
           styles_spacing-base">'.$Product->qty.'</div>
           <div class="OrderItem_container">
           <div class="OrderItem_category"></div>
           <div class="OrderItem_itemHeader">
           <div id="titletest" class="OrderItem_name styles_just-right styles_base styles_spacing-base">'.$Product->name.'</div>
           <div id="cartprice" class="OrderItem_total">$'.$Product->price*$Product->qty.'</div>
            <input id="mycartprice" type="text" name="mycartprice" value="'.$Product->price.'"  hidden="">
         </div>
        <div>
        </div>
      <div>
     <button class="remove_item OrderItem_action Button_root" data-id="'.$Product->rowId.'" data-price="'.$Product->price*$Product->qty.'" data-qty="'.$Product->qty.'" type="submit">Remove</button>

     </div>
    </div>
   </div>';
   }
 }

Answer 1

这是因为您的元素是动态更新的，您应该再次附加事件。 请改用此代码:

     <script>
     $(function(){ 
 $(document).on('click','.remove_item', function () { 
      var id = $(this).data('id'); 
      $.ajax({
             type: 'DELETE',
             url: "cart/"+ id,  
             data: {'_token': $('input[name=_token]').val()},
             success: function (data) {
               $('#cart_product').html(data);        
             }               
        });
       });
     });
    </script>