Laravel - Ajax 和 preventdefault

Question

我在将商品放入购物车时遇到问题，在我将商品添加到购物车后，Ajax 运行良好，然后当我尝试从列表中删除它时，如果我重新加载页面，它第一次无法使用 Ajax它会起作用的。

Ajax 生成这样的响应：

1x ItemTitle X（移除）

当 remove 有 /delete-from-cart/id/place_id 时

它只在我重新加载页面时有效，而且我还有一个优惠券按钮，它也可以与 Ajax 一起使用，但它只在刷新后有效。

$('.deletefromcart a').each(function(){
    $('#'+this.id).on('click',function(e) {
      e.preventDefault();
      var id = $(this).attr('data-del');
      var url = $(this).attr('href');
      var place = $(this).attr('data-place');
       $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
      });
      $.ajax({
         url: '/delete-from-cart/'+id+'/'+place+'',
         method: 'get',
         data: $(this).serialize(),
         success: function(data){
           toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
             $(".korpa").load(location.href + " #cartAll");
         },
         error: function(data){
           console.log(data);
         }

         });
     });
});

似乎这个函数在我添加到购物车后找不到任何从 ajax 运行它的对象，刷新后它找到了。

如果您需要实时预览，我可以为您注册一个帐户。

Answer 1

您应该将每个“删除”元素上的点击事件处理程序绑定为，

$('body').on('click', '.deletefromcart a', function (e) {
    e.preventDefault();
    var id = $(this).attr('data-del');
    var url = $(this).attr('href');
    var place = $(this).attr('data-place');

    $.ajax({
        url: '/delete-from-cart/' + id + '/' + place + '',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        method: 'get',
        data: $(this).serialize(),
        success: function (data) {
            toastr.warning('Uspešno ste obrisali iz korpe!', 'Korpa');
            $(".korpa").load(location.href + " #cartAll");
        },
        error: function (data) {
            console.log(data);
        }
    });
});

注意 1：您的绑定方法会将事件处理程序附加到所有 .deletefromcart a 元素。但是我建议将事件处理程序绑定到一个元素body。这也适用于动态添加的 .deletefromcart a 元素。

注意 2：您也可以像上面一样包含标题值。