jquery - 如何避免未捕获的 jQuery 错误

Question

我在我的 WordPress 主题中使用 Owl Carousel，并且当前在我的页面中应用 jQuery，而在我调用该函数之前可能不会加载 jQuery，并且它会抛出该错误...如何避免该错误？我正在使用文档 .也准备好功能......虽然我只想在页脚中加载 jQuery 而不是在页眉中......任何人都可以指导我，我错在哪里？ 这是我正在使用的代码

$(document).ready(function() {
  $('#portfolio-slider').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 3,
    responsive: {
      0: {
        items: 2
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  })
});

这是在我的页面内，而 jquery 正在页脚中加载....

Answer 1

首先，为了避免错误，请将代码包装为:

(function($){
    // your code goes here
})(jQuery);

这将确保$ === jQuery

其次，当您将脚本放入 Wordpress 中时，添加 jQuery 作为依赖项:

wp_enqueue_script ( 'YourScript', 'your-script.js', array('jQuery') )

如果你不能像上面那样做，另一种方法是使用 DOMContentLoaded 处理程序，这正是 document.ready 所做的，但没有 jQuery - 当它触发时，你应该有 jQuery 可用:

document.addEventListener('DOMContentLoaded', function() {
  $('#portfolio-slider').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    items: 3,
    responsive: {
      0: {
        items: 2
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  })
});