如何避免未捕获的 jQuery 错误答案

【问题标题】：How to avoid uncaught jQuery error如何避免未捕获的 jQuery 错误
【发布时间】：2016-10-17 14:50:09
【问题描述】：

我在我的 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 正在页脚中加载....

【问题讨论】：

你能把代码贴出来吗？
这是我刚刚在问题中提供的代码
document.ready 将解决此目的，前提是在使用之前已包含 jQuery。您可以在页脚中包含 jQuery 后将代码移动到页脚
但是，我不能去那里，我必须在我的页面中使用其他任何东西，而我也在使用 document.ready ...那为什么我会遇到这个问题？

标签： jquery wordpress

【解决方案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
      }
    }
  })
});

【讨论】：

哇，救命稻草，它就像一个有魅力的人......非常感谢你从那时起就是我的老师和英雄......再次感谢亲爱的

【解决方案2】：

这是在调用代码之前不断检查 jQuery 是否已加载的一种方法：-

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

function checkForjQuery() {

  window.jQuery ? jQueryLoaded() : setTimeout(checkForjQuery);

}

checkForjQuery();

【讨论】：

【解决方案3】：

为什么会发生

$(document).ready() 在加载 dom 时执行其内部代码，但您在加载 jquery 库之前调用该函数，因此浏览器不知道 $(document).ready() 的含义。

解决方法

你可以通过一些方式来处理它；您可以将代码移动到加载 jQuery 库的行之后，您可以将代码添加到单独的 js 文件并在 jQuery 库之后加载（推荐）...或者您也可以使用 vanilla js 等待 dom 准备好，例如：

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
            }
        }
    });
});

查看https://stackoverflow.com/a/21814964/3648578 了解最后的解决方法。

【讨论】：