有没有办法让jquery函数始终起作用？

如何解决有没有办法让jquery函数始终起作用？

我为客户创建了一个网站，该网站似乎不时出现故障。菜单按钮有时会起作用，而其他时候却无法打开/激活菜单。

有人可以帮助我发现错误吗？我浏览了一下，但找不到问题。这样做时，只有刷新页面后才能再次使用。

$(document).ready(function() {
  // Function to change the nav-bar on scroll
  $(window).scroll(function() {
    ($(window).scrollTop() >= 100) ? (
      $('.fixed-nav-bar').addClass('scrolled'),$('.the-bass').addClass('scrolled')
    ) : (
      $('.fixed-nav-bar').removeClass('scrolled'),$('.the-bass').removeClass('scrolled')
    );
  });

  // Drop Down Function
  $('#menuButton').on('change',function() {
    ($('#menuButton').is(':checked')) 
      ? ($('.the-bass').addClass('dropped')) 
      : ($('.the-bass').removeClass('dropped'));
  });
  var feedbackSlider = $('.feedback-slider');
  feedbackSlider.owlCarousel({
    items: 1,nav: true,dots: true,autoplay: true,loop: true,mouseDrag: true,touchDrag: true,navText: ["<i class='fa fa-long-arrow-left'></i>","<i class='fa fa-long-arrow-right'></i>"],responsive: {
      // breakpoint from 767 up
      767: {
        nav: true,dots: false
      }
    }
  });

  feedbackSlider.on("translate.owl.carousel",function() {
    $(".feedback-slider-item h3").removeClass("animated fadeIn").css("opacity","0");
    $(".feedback-slider-item img,.feedback-slider-thumb img,.customer-rating").removeClass("animated zoomIn").css("opacity","0");
  });

  feedbackSlider.on("translated.owl.carousel",function() {
    $(".feedback-slider-item h3").addClass("animated fadeIn").css("opacity","1");
    $(".feedback-slider-item img,.customer-rating").addClass("animated zoomIn").css("opacity","1");
  });
  
  feedbackSlider.on('changed.owl.carousel',function(property) {
    var current = property.item.index;
    var prevThumb = $(property.target).find(".owl-item").eq(current).prev().find("img").attr('src');
    var nextThumb = $(property.target).find(".owl-item").eq(current).next().find("img").attr('src');
    var prevRating = $(property.target).find(".owl-item").eq(current).prev().find('span').attr('data-rating');
    var nextRating = $(property.target).find(".owl-item").eq(current).next().find('span').attr('data-rating');
    $('.thumb-prev').find('img').attr('src',prevThumb);
    $('.thumb-next').find('img').attr('src',nextThumb);
    $('.thumb-prev').find('span').next().html(prevRating + '<i class="fa fa-star"></i>');
    $('.thumb-next').find('span').next().html(nextRating + '<i class="fa fa-star"></i>');
  });
  
  $('.thumb-next').on('click',function() {
    feedbackSlider.trigger('next.owl.carousel',[300]);
    return false;
  });
  
  $('.thumb-prev').on('click',function() {
    feedbackSlider.trigger('prev.owl.carousel',[300]);
    return false;
  });
});

网站为https://www.dinaledifs.co.za

解决方法

在打开网站的情况下查看控制台，出现错误：

未捕获的ReferenceError：未定义$

刷新页面时，此错误消失。原因是因为jquery.js引用已被缓存。

此行为的原因是因为您在async引用中使用了<script />，但是还有其他依赖于jQuery的脚本。要解决您的问题，只需删除async属性：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="javascript/javascript.js"></script>
<script src="javascript/loader.js"></script>
<script src="https://kit.fontawesome.com/137e079bdc.js" crossorigin="anonymous"></script>