Как исправить функцию jQuery работает только один раз. Должен быть связан с ajax .load ()

Question

Мой код jquery работает нормально, если браузер обновлен (недавно обновлен).Так что в основном это работает только один раз.После этого e.preventDefault () перестал работать так же, как и весь код.

Я думаю, что это может быть из-за моей функции .load ajax.

Вот мой код:

<script type="text/javascript">
$(function() {
$('.cart-remove').each(function() {
$(this).click(function(e) {
e.preventDefault();
$('.cart-drawer .loader-container').css('display','flex');
$.ajax({
    url: $(this).attr('href'),
    success: function(response) {
       $.getJSON('/cart.js', function(cart) {
       $('.cart-count').html(cart.item_count);
});
      $('.cart-drawer').show();
      $('body').toggleClass('position-relative');
      $('.header-section').toggleClass('d-flex');
      $('.overlay').show();
      $('.cart-drawer').addClass('slideIn');
      $(".cart-drawer").load(" .cart-drawer > *");

    }
})
})
})
})
</script>

Answer 1

Удалить каждый цикл, делегировать вам событие клика

$(function() {
    $('body').on('click','.cart-remove',function(e) {
      e.preventDefault();
      $('.cart-drawer .loader-container').css('display', 'flex');
      $.ajax({
        url: $(this).attr('href'),
        success: function(response) {
          $.getJSON('/cart.js', function(cart) {
            $('.cart-count').html(cart.item_count);
          });
          $('.cart-drawer').show();
          $('body').toggleClass('position-relative');
          $('.header-section').toggleClass('d-flex');
          $('.overlay').show();
          $('.cart-drawer').addClass('slideIn');
          $(".cart-drawer").load(" .cart-drawer > *");

        }
      })
    })
})