title: Ajax.click function button on site not doing anything
body: <p>can't work out why my button won't do anything on click. Won't even post the console log. Quite new to using ajax so bit confused. Thanks in advance, I hope it's something simple i'm missing. </p>
  
  <p>This is the page with the button</p>
  
  <pre><code>{% extends "website/base.html" %}
  {% load staticfiles %}
  
  {% block content %}
  &lt;style&gt;
      #table td {
          padding: 0px;
          margin: 0px;
      }
  
      #table {
          border-spacing: 0px;
      }
  &lt;/style&gt;
  
  &lt;form id="search-form" method="POST" action="{% url 'searchs' %}"&gt;
      {% csrf_token %}
      &lt;div class="active-cyan-3 active-cyan-4 mb-4"&gt;
          &lt;input class="input" name="username" type="hidden" value="{{ username }}"&gt;
          &lt;input class="form-control" type="text" placeholder="Search" aria-label="Search" name="search-input"
              id="search-input"&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  &lt;div class="text-center"&gt;
      &lt;button name="search-button" id="searchbut" align="centre" class="btn btn-dark btn-lg"&gt;Search&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- Search form --&gt;
  &lt;br&gt;
  &lt;table id="search-tbl" class="table" width="100%" border=1&gt;
      &lt;thead class="thead-dark"&gt;
          &lt;tr&gt;
              &lt;th&gt;Image&lt;/th&gt;
              &lt;th&gt;Title&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          {% for Auction in results %}
  
          &lt;tr class='bg-white' align="center"&gt;
              &lt;td width="60%" vertical-align="middle" align="center"&gt;
                  {% load static %}
                  &lt;a href="auction/{{ Auction.id}}"&gt;
                      &lt;img width="" href="auction/{{ Auction.id}}" src="{{ Auction.picture }}"&gt;
                  &lt;/a&gt;
              &lt;/td&gt;
              &lt;td align="center"&gt;&lt;a href="auction/{{ Auction.id}}"&gt;{{ Auction.title }}&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
          {% endfor %}
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  {% endblock %}
  
  &lt;script&gt;
      $(function () {
          $('#searchbut').click(function () {
              console.log("pushed")
              $.ajax({
                  url: "{% url 'searchs' %}",
                  method: "POST",
                  data: $("#search-form").serializeArray(),
                  success: function (data) {
                      console.log(data)
                      $("#search-tbl tbody").remove();
                      for (var i = 0; i &lt; data.results.length; i++) {
                          $("#search-tbl tbody").append("&lt;tr class='bg-white' align='center'&gt;&lt;td width = '60%'' vertical-align= 'middle' align='center'&gt;&lt;a href='auction/" + data.results[i].id + "&gt;&lt;img width = '350' href='auction/" + data.results[i].id + "' src='/static/" + data.results[i].picture + "'&gt;&lt;/a&gt;&lt;/td&gt;&lt;td align='center'&gt;&lt;a href='auction/" + data.results[i].id + "'&gt;" + data.results[i].title + "&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;")
                      }
                  }
              })
          })
  
  
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is the page with the layout. I intially assumed that having the jquery scripts introduced in the layout was causing the issue but after removing them from there and putting them on the actual template it still wouldn't work.</p>
  
  <pre><code>{% load staticfiles %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
      &lt;title&gt;{{appname}}&lt;/title&gt;
      &lt;style&gt;
          .active-cyan-3 input[type=text] {
              border: 1px solid #4dd0e1;
              box-shadow: 0 0 0 1px #4dd0e1;
              float: left;
              width: 80%;
          }
  
          .bg-lightblue {
              background-color: #ebf4ff;
          }
  
          .vertical-center {
              min-height: 100%;
              /* Fallback for browsers do NOT support vh unit */
              min-height: 90vh;
              /* These two lines are counted as one :-)       */
              align-items: center;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"&gt;
          &lt;a class="navbar-brand" href="{% url 'index' %}"&gt;{{appname}}&lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
              &lt;ul class="navbar-nav mr-auto"&gt;
                  {% if loggedin %}
                  &lt;span class="navbar-text"&gt;
                      Welcome ({{ username }})
                  &lt;/span&gt;
                  {% endif %}
  
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="{% url 'index' %}"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  {% if loggedin %}
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Profile&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="{% url 'logout' %}"&gt;Logout&lt;/a&gt;
                  &lt;/li&gt;
                  {% else %}
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="{% url 'login' %}"&gt;Login&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="{% url 'signup' %}"&gt;Signup&lt;/a&gt;
                  &lt;/li&gt;
                  {% endif %}
              &lt;/ul&gt;
              &lt;form class="form-inline my-2 my-lg-0"&gt;
                  &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;
                  &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
  
      &lt;div class="jumbotron vertical-center bg-lightblue"&gt;
          &lt;div class="container"&gt;
  
              {% block content %}
              {% endblock %}
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
      &lt;br&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
          integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
          integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>