I faced with this error on my WordPress website “Uncaught TypeError: $ is not a function at (index):2”
I found this solution to add
JavaScript
x
2
1
var $ = jQuery.noConflict();2
before the
JavaScript
1
2
1
$( document ).ready(function(){2
But, I couldn’t find the “$( document ).ready(function(){” code in the theme folder of my website to fix it.
here is the exact code via inspect, sources window of chrome browser
JavaScript
1
12
12
1
<html lang="en" class="no-js" itemscope itemtype="https://schema.org/WebPage"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /><link rel="alternate" hreflang="en" href="https://ccsi.global/"/><link rel="shortcut icon" href="https://ccsi.global/wp-content/uploads/2018/05/imageedit_89_3942571748.png" type="image/x-icon" /><link type="text/css" media="all" href="https://ccsi.global/wp-content/cache/autoptimize/css/autoptimize_9668264b3a77ccf7dc30b539d4038dbc.css" rel="stylesheet" /><title>Comcapint – Home – Compliance and Capacity Skills International</title><link rel='dns-prefetch' href='//fonts.googleapis.com' /><link rel='dns-prefetch' href='//s.w.org' /><link rel="alternate" type="application/rss+xml" title="Comcapint » Feed" href="https://ccsi.global/feed/" /><link rel="alternate" type="application/rss+xml" title="Comcapint » Comments Feed" href="https://ccsi.global/comments/feed/" /> <script type="text/javascript">window._wpemojiSettings = {"baseUrl":"https://s.w.org/images/core/emoji/13.0.0/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/13.0.0/svg/","svgExt":".svg","source":{"concatemoji":"https://ccsi.global/wp-includes/js/wp-emoji-release.min.js?ver=5.5"}};2
!function(e,a,t){var r,n,o,i,p=a.createElement("canvas"),s=p.getContext&&p.getContext("2d");function c(e,t){var a=String.fromCharCode;s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,e),0,0);var r=p.toDataURL();return s.clearRect(0,0,p.width,p.height),s.fillText(a.apply(this,t),0,0),r===p.toDataURL()}function l(e){if(!s||!s.fillText)return!1;switch(s.textBaseline="top",s.font="600 32px Arial",e){case"flag":return!c([127987,65039,8205,9895,65039],[127987,65039,8203,9895,65039])&&(!c([55356,56826,55356,56819],[55356,56826,8203,55356,56819])&&!c([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]));case"emoji":return!c([55357,56424,8205,55356,57212],[55357,56424,8203,55356,57212])}return!1}function d(e){var t=a.createElement("script");t.src=e,t.defer=t.type="text/javascript",a.getElementsByTagName("head")[0].appendChild(t)}for(i=Array("flag","emoji"),t.supports={everything:!0,everythingExceptFlag:!0},o=0;o<i.length;o++)t.supports[i[o]]=l(i[o]),t.supports.everything=t.supports.everything&&t.supports[i[o]],"flag"!==i[o]&&(t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&t.supports[i[o]]);t.supports.everythingExceptFlag=t.supports.everythingExceptFlag&&!t.supports.flag,t.DOMReady=!1,t.readyCallback=function(){t.DOMReady=!0},t.supports.everything||(n=function(){t.readyCallback()},a.addEventListener?(a.addEventListener("DOMContentLoaded",n,!1),e.addEventListener("load",n,!1)):(e.attachEvent("onload",n),a.attachEvent("onreadystatechange",function(){"complete"===a.readyState&&t.readyCallback()})),(r=t.source||{}).concatemoji?d(r.concatemoji):r.wpemoji&&r.twemoji&&(d(r.twemoji),d(r.wpemoji)))}(window,document,window._wpemojiSettings);</script> <link rel='stylesheet' id='Yantramanav-css' href='https://fonts.googleapis.com/css?family=Yantramanav%3A1%2C300%2C400%2C400italic%2C500%2C700%2C700italic&ver=5.5' type='text/css' media='all' /><link rel='stylesheet' id='PT+Serif-css' href='https://fonts.googleapis.com/css?family=PT+Serif%3A1%2C300%2C400%2C400italic%2C500%2C700%2C700italic&ver=5.5' type='text/css' media='all' /> <script>if (document.location.protocol != "https:") {document.location = document.URL.replace(/^http:/i, "https:");}</script><script type='text/javascript' src='https://ccsi.global/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp' id='jquery-js'></script> <script type='text/javascript' id='gadwp-tracking-analytics-events-js-extra'>var gadwpUAEventsData = {"options":{"event_tracking":"1","event_downloads":"zip|mp3*|mpe*g|pdf|docx*|pptx*|xlsx*|rar*","event_bouncerate":0,"aff_tracking":0,"event_affiliates":"/out/","hash_tracking":0,"root_domain":"ccsi.global","event_timeout":100,"event_precision":0,"event_formsubmit":0,"ga_pagescrolldepth_tracking":0,"ga_with_gtag":0}};</script> <script type='text/javascript' id='sdm-scripts-js-extra'>var sdm_ajax_script = {"ajaxurl":"https://ccsi.global/wp-admin/admin-ajax.php"};</script> <link rel="https://api.w.org/" href="https://ccsi.global/wp-json/" /><link rel="alternate" type="application/json" href="https://ccsi.global/wp-json/wp/v2/pages/3014" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://ccsi.global/xmlrpc.php?rsd" /><link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://ccsi.global/wp-includes/wlwmanifest.xml" /><meta name="generator" content="WordPress 5.5" /><link rel="canonical" href="https://ccsi.global/" /><link rel='shortlink' href='https://ccsi.global/' /><link rel="alternate" type="application/json+oembed" href="https://ccsi.global/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fccsi.global%2F" /><link rel="alternate" type="text/xml+oembed" href="https://ccsi.global/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fccsi.global%2F&format=xml" /> <script type="text/javascript">$(document).ready(function(){3
$(".nav-tabs a").click(function(){4
$(this).tab('show');5
});6
$('.nav-tabs a').on('shown.bs.tab', function(event){7
var x = $(event.target).text(); // active tab8
var y = $(event.relatedTarget).text(); // previous tab9
$(".act span").text(x);10
$(".prev span").text(y);11
});12
});
Advertisement
Answer
Most wordpress templates already call noConflict()
When you want to use $ in your code it is better to use an IIFE wrapper instead
JavaScript
1
6
1
(function($){2
// can use $ here3
$(document).ready.4
5
})(jQuery);6
Also make sure you aren’t trying to use jQuery before the library is loaded.
using wp_enqueue_script() will take care of that issue