Skip to content

Uncaught ReferenceError: $ is not defined in console

I am trying to append a div when a checkbox is selected in dajngo template but i keep receiving Uncaught ReferenceError: $ is not defined in the console

the template:

{% extends 'base_layout.html'%}
{%load static%}
{% block content %}
<div class="inventory-content">
    <div class='category'>
        <div class='category-checkbox'>
            {%for category in categories%}
            <input type="checkbox" id="{{}}" name="{{}}" value="{{}}">
            <label for="{{}}"> {{}}</label><br>
    <div class='items'></div>


    $('.category-checkbox input[type="checkbox"]').click(function (){
        if ($(this).is(':checked')) {
             // Add the element to the div with an id identifier
             $('.items').append('<div id="[{{}}]">123</div>');
        } else {
             // Remove the element from the div targeted by the id identifier
             $('.items #[{{}}]').remove();
{% endblock %}


jquery in django is aliased to django.jQuery instead of $. If you want to use $ instead, you can do something like this:

(function($) {
    //do some stuff with $ here