JS no longer working after WordPress update - Uncaught TypeError: $ is not a function

Question

我上周更新了我正在使用的网站到最新的 WordPress。 None 的自定义 JS 不再工作了，我不知道为什么。

即使我分段删除它以尝试隔离问题，我总是得到 'Uncaught TypeError: $ is not a function'。

我无法弄清楚是什么导致了这种情况发生。

据我所知，所有脚本都按预期加载。

不幸的是，我的自定义文件中的所有 JS 都是从 Stack Overflow 或其他在线资源中获取的——我不是自己写的（只是修改过），因此我很难诊断这个问题。

如有任何帮助，我们将不胜感激

// apply effect to pages

var $headereffect = $('.hero-effect');

$headereffect.waypoint(function (direction) {
   if (direction == 'down') {
   $headereffect.addClass('hero-effect-animation');
   } else {
   $headereffect.removeClass('hero-effect-animation');
   }

}, { offset:'1px' });



// apply effect to default page headers



var $headereffect = $('#page-header');

$headereffect.waypoint(function (direction) {
   if (direction == 'down') {
   $headereffect.addClass('hero-effect');
   } else {
   $headereffect.removeClass('hero-effect');
   }

}, { offset:'1px' });

Answer 1

我大胆的猜测是使用 jQuery 而不是 $ 因为有时后者被其他脚本库使用这会导致问题和冲突。

所以

var $headereffect = $('.hero-effect');

变成

var $headereffect = jQuery('.hero-effect');

这将解决当前的问题，但也可能会在稍后阶段提出其他问题。检查您的代码并确保您使用一致的 jQuery 引用。

处理 $ 问题 的选项可以找到 jQuery 方式 here。从实用的角度来看，您可以使用 jQuery 的快捷方式将 jQuery 设置为 "no conflict" 模式。在这种情况下，“$j”而不是默认的“$”：

var $j = jQuery.noConflict();
$j(function(){
    $j("#sidebar li a").hover(function(){
        $j(this).stop().animate({
            paddingLeft: "20px&"
        }, 400);
    }, function() {
        $j(this).stop().animate({
            paddingLeft: 0
        }, 400);
    });
});

最佳实践 as Wordpress suggest 是将代码包装在立即调用的函数表达式中，将 jQuery 传递给它并像这样在内部使用 $ :

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

JS no longer working after WordPress update - Uncaught TypeError: $ is not a function

JS no longer working after WordPress update - Uncaught TypeError: $ is not a function

javascript

jquery

jquery-waypoints