jQuery "$ is not a function" Error

The “$ is not a function” error is one of the most frustrating issues developers encounter when working with jQuery. This comprehensive guide will walk you through every possible cause and solution to get your jQuery code working properly again.

What Does “$ is not a function” Mean?

When you see the error Uncaught TypeError: $ is not a function in your browser’s console, it means JavaScript cannot recognize the $ symbol as the jQuery function. This typically happens when jQuery hasn’t loaded properly or there’s a conflict with the $ alias.

Common Causes of the Error

Here are some common causes of the error ‘$ is not a function’.

1. jQuery Library Not Loaded

The most common cause is forgetting to include the jQuery library before using it in your code.

Incorrect Example:

<script>
$(document).ready(function() {
    $('#myButton').click(function() {
        alert('Button clicked!');
    });
});
</script>
<!-- jQuery loaded AFTER the script that uses it -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Correct Example:

<!-- jQuery loaded BEFORE the script that uses it -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#myButton').click(function() {
        alert('Button clicked!');
    });
});
</script>

You can refer to the screenshot below to see the output.

2. jQuery Loading Before DOM Ready

Even with jQuery loaded, timing issues can occur if your script runs before jQuery is fully initialized.

Solution:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Wait for jQuery to load completely
$(document).ready(function() {
    // Your jQuery code here
    $('.button').click(function() {
        $(this).fadeOut();
    });
});
</script>

You can refer to the screenshot below to see the output.

3. Multiple jQuery Versions Conflict

Loading multiple jQuery versions can cause conflicts, as noted in the search results about “loading multiple jQuery versions”.

Problematic Code:

<script src="jquery-1.12.4.min.js"></script>
<script src="jquery-3.6.0.min.js"></script> <!-- Conflict! -->
<script>
$('#element').hide(); // May not work
</script>

Solution:

<!-- Use only ONE jQuery version -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#element').hide(); // Works correctly
</script>

Step-by-Step Solutions

Let me explain to you some solutions to the error ‘$ is not a function’

Solution 1: Use the Full jQuery Object

Instead of using the $ shorthand, use the full jQuery object name to avoid conflicts, as suggested in the Kinsta knowledge base.

// Instead of this:
$(document).ready(function() {
    $('#button').click(function() {
        alert('Clicked!');
    });
});

// Use this:
jQuery(document).ready(function() {
    jQuery('#button').click(function() {
        alert('Clicked!');
    });
});

Solution 2: Create Your Own jQuery Alias

Map the $ symbol to jQuery explicitly to ensure it works:

jQuery(document).ready(function($) {
    // Now $ is safely mapped to jQuery within this function
    $('#myElement').fadeIn();
    $('.buttons').on('click', function() {
        $(this).addClass('active');
    });
});

Solution 3: Use noConflict() Method

When other libraries also use the $ symbol, use jQuery’s noConflict() method:

// Release $ back to other libraries
var jq = jQuery.noConflict();

// Use jq instead of $
jq(document).ready(function() {
    jq('#element').show();
});

// Or reassign $ within a scope
jQuery.noConflict();
jQuery(document).ready(function($) {
    // $ works normally here
    $('#element').hide();
});

Advanced Troubleshooting

Let me show you some advanced troubleshooting techniques.

Check if jQuery is loaded

Before using jQuery, verify it’s loaded properly:

if (typeof jQuery === 'undefined') {
    console.log('jQuery is not loaded!');
} else {
    console.log('jQuery version: ' + jQuery.fn.jquery);
    // Safe to use jQuery here
    $(document).ready(function() {
        // Your code
    });
}

Debugging Network Issues

Sometimes jQuery fails to load due to network problems:

// Check if CDN fails and provide fallback
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
if (typeof jQuery === 'undefined') {
    // Load local fallback
    document.write('<script src="js/jquery-3.6.0.min.js"><\/script>');
}
</script>

Best Practices to Prevent the Error

Here are the best practices to prevent the error ‘$ is not a function’.

1. Always Load jQuery First

Ensures jQuery is available before your script runs to avoid $ is not a function errors.

<!DOCTYPE html>
<html>
<head>
    <!-- Load jQuery in the head section -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- Your HTML content -->

    <!-- Your jQuery scripts at the bottom -->
    <script>
    $(document).ready(function() {
        // Your code here
    });
    </script>
</body>
</html>

2. Use Modern jQuery Syntax

Provides cleaner, reliable event handling that works even if scripts load early.

// Modern approach - works even if DOM loads before script
$(function() {
    $('#submit-btn').on('click', function(e) {
        e.preventDefault();
        // Handle form submission
        var formData = $('#myForm').serialize();
        console.log(formData);
    });
});

3. Error Handling for Production

Adds protection so the UI still works even when jQuery fails or throws errors.

try {
    $(document).ready(function() {
        // Your jQuery code
        $('.dropdown').slideDown();
    });
} catch (error) {
    console.error('jQuery error:', error);
    // Fallback for when jQuery fails
    document.getElementById('dropdown').style.display = 'block';
}

Common Scenarios and Quick Fixes

Some common scenarios occur while solving the ‘$ is not a function’ error, also how to fix the problem.

WordPress Sites

In WordPress, use jQuery instead of $ or wrap your code:

jQuery(document).ready(function($) {
    // Use $ freely within this function
    $('.menu-toggle').click(function() {
        $('.mobile-menu').slideToggle();
    });
});

External Script Files

When using external JS files, ensure proper loading order:

<script src="jquery-3.6.0.min.js"></script>
<script src="your-custom-script.js"></script>

Conclusion

The “$ is not a function” error is easily fixable once you understand its root causes. The key is ensuring jQuery loads before any code that uses it, avoiding version conflicts, and using proper syntax. Following the solutions and best practices outlined in this guide will help you avoid this common jQuery pitfall and keep your JavaScript running smoothly.

Remember to always check your browser’s developer console for specific error details and use the debugging techniques provided to identify exactly where the issue occurs in your code.

You may also read:

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/

jQuery “$ is not a function” Error