Laravel - Ajax и предотвращение дефолта

Question

У меня проблема с получением товаров в корзину, после добавления товара в корзину Ajax работает отлично, затем, когда я пытаюсь удалить его из списка, в первый раз он не будет работать с Ajax, если я перезагрузлю страницу это будет работать.

Ajax генерирует ответ, подобный этому:

1x ItemTitle X (удалить)

При удалении есть / удалить из корзины / 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

Вы должны привязать обработчик события click к каждому элементу 'delete' как,

$('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 : Вы можете включить значения заголовка, как указано выше.