“TypeError: $ is not a function” after loading some scripts into wordpress

3 Views

We start to provide a HTML-Snippet like Google or Facebook does for its advertising things or the integration for the Facebook like button. It contains a business application.

Our HTML-Snippet loads a script and contains a few more informations:

Read More
<div id="ncc" data-hash="" ng-jq>
<div id="wiz" ng-controller="WizardCtrl"></div>
<script src="{{URLTOSCRIPT}}/load.js"></script>
</div>

The script checks if a jQuery is installed and loads all related things into the DOM and at the ends inits an angular-Application.

All this works fine on pages that havn’t enabled jQuery.noConflicts-Mode.

After the latest WordPress-Updates we got an ERROR

“TypeError: $ is not a function”

We tried to get rid of it using some workaroungs like 

jQuery(document).ready(function($){

    $(function () {
    //code to execute
});

OR 

jQuery(document).ready(function(){
    var j = jQuery.noConflicts();
    j(function () {
    //code to execute
});

and changed also all references in the angular-part. But nothing working really well.

Any suggestions?

We are using AngularJs v1.4.7, jQuery v1.11.3 (started to migrate to 2.1.4), the

Post Views: 3

Related posts

6 comments

  1. Sometimes when more versions of jQuery are loaded or if it conflicts with another library you can get that error:

    have you tried to replace in all of your code the $ symbol with the word “jQuery”?

    So your example would become:

    jQuery(document).ready(function(){

    jQuery(function () {
    //code to execute
});

    Note: I don’t think that in this case passing “$” as a parameter is needed anymore 😉

    EDIT: there is also another possibility:

    you say that you’re using the $ sign (i guess to avoid the usual conflicts in wordpress) in this way:

    jQuery(document).ready(function($){

    $(function () {
    //code to execute
});

    But this will make the $ symbol available only inside the ready() function.

    Did you check if you have somewhere code using the $ where you actually aren’t allowed to (or in other words if you have any piece of your js code where $ isn’t mapped as “jQuery”)?

    EDIT 2: The only working solution in the end was:

    (function($,undefined){ 
   $(document).ready(function(){ 
     //code to execute 
   }); 
})(jQuery);"

  2. Make sure jQuery is loaded before any other script that uses certain jQuery functions.

  3. Normally those errors arise, when the jQuery library wasn’t loaded yet. Make sure that a $()-call is called after jquery was loaded, which normally happens at the end of your file to speed up loading times.

    Therefore putting

    <script src="{{URLTOSCRIPT}}/load.js"></script>

    to the end of the body-tag should help.

  4. Usually when you get this error: “TypeError: $ is not a function”
    it means, you a missing a JQuery library or they are not placed in the correct order. Ordering JQuery libraries is important.

  5. $ is not a function. It means that there is a function named $, but it does not have a plugin/widget named selectable. So, something has stolen your $ or there is another library added after it, or it was never loaded.

  6. Your script file is not loading properly or script file is not available.
    open browser inspect element and put this code
    jQuery().jquery.
    it’s display which jquery version is use.
    this is for testing
    jQuery(document).ready(function()
    {

    alert(“test”);
    });

Comments are closed.