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

Answer 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();

Answer 3

为什么会发生

加载dom时，

$(document).ready()执行其内部代码，但是在加载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以获取最后的解决方法。

如何避免未捕获的jQuery错误

3 个答案: