如何修复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 > *");
        }
      })
    })
})