How to Fix ‘$ is not defined- $function()’ Error on JavaScript?

JavaScript (JS) is a high-level scripting language complies with the ECMAScript Specification. JavaScript is one of the most important technologies involved in the creation of the internet. It enables the creation of interactive web pages and is also involved in the development of web applications. Quite recently, a lot of reports have been coming in where users have been experiencing the “$ is not defined- $function()” Error while executing code.

What Causes the “$ is not defined- $function()” Error on JavaScript?

After receiving numerous reports from multiple users, we decided to investigate the issue and devised a set of solutions to fix it completely. Also, we looked into the reason due to which it is triggered and listed it as follows.

Now that you have a basic understanding of the nature of the problem, we will move on towards the solutions. Make sure to implement these in the specific order in which they are presented to avoid conflict.

Solution 1: Linking JQuery

You have to link the JavaScript to JQuery in order to get the command to work properly. Therefore, we will be adding a line of code at the start of your file to bypass this issue. For that:

1. Copy and paste the following code at the start of your file.

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

2. Save your changes and check to see if the issue persists.

Note: This will prompt the script to get the JQuery data from the link that has been added, for a faster response, add JQuery to your server locally.

Solution 2: Adding JQuery Locally

You can also download and add the JQuery locally, navigate to this page and download JQuery on your computer and add it to the JavaScript before executing the file.

Note: Make sure to add the JQuery before the JavaScript that uses it.

Solution 3: Binding to JQuery

In some cases the “$” variable is not bound to JQuery, therefore, in this step, we will be executing a line of code to bind it to JQuery. For That:

1. Execute the following code to bind the “$” variable to JQuery.

   (function($) {
       $(function() {
           $('.update').live('change', function() {
               formObject.run($(this));
           });
       });
   })(jQuery);

2. After executing, check to see if the issue persists.

Solution 4: Importing from JQuery

For some users, importing the “$” variable from JQuery was what solved their issue, therefore, in this step, we will be using a command to import the “$” variable. For that:

1. Execute the following code to import the “$” variable from JQuery.

   import $ from 'jquery';
   (function () {
    // ... code let script = $(..) 
   })()

2. After executing the code, check to see if the issue persists.