title: $.ajax not working when used in ("click") event listener
body: <p>This is my Javascript code:</p>
  <pre><code>const checkbox = document.querySelector(&quot;#checkbox&quot;);
  const button = document.querySelector(&quot;#button&quot;);
  
  button.addEventListener(&quot;click&quot;, function(e){
      var text = &quot;&quot;;
      if(checkbox.checked === true){
          text = &quot;Is Checked&quot;;
      }
  
      $.ajax({
          url: '/update_if_checked/',
          data: {'is_checked': text},
          type: 'POST'
       }).done(function(response){
         console.log(response);
       });
  
  });
  </code></pre>
  <p>I am getting an error which says $.ajax is not a function at HTMLButtonElement.</p>
  <p>Here, checkbox is an input of type checkbox and when the button whose id is &quot;button&quot; is clicked, I want to send the data i.e. if the checkbox is checked to the Django Server.</p>
  <p>I have imported this version of jquery in HTML:</p>
  <pre><code>&lt;script src=&quot;https://code.jquery.com/jquery-3.1.1.min.js&quot;&gt;
  </code></pre>
  <p>EDIT</p>
  <p>Sorry about the id of the button that's button only.</p>
  <p>HTML:</p>
  <pre><code>&lt;div&gt;Check&lt;input type=&quot;checkbox&quot; id=&quot;checkbox&quot;&gt;&lt;/div&gt;
  &lt;button id=&quot;button&quot;&gt;Submit&lt;/button&gt;
  </code></pre>