无法读取null的属性“ val”。我的助教无法弄清楚为什么它也返回null

Question

$(".search-button").click(function(event) {
  event.preventDefault();
  var title = $("#userInput").val();
  console.log(title);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="search-bar">
  <input class="search-query" type="text" id="userInput" placeholder="Search for books..." name="search" value="" />
  <button class="search-button" type="submit">Search</button>
</form>

单击搜索按钮时，它应该console.log登录用户输入的内容。相反，它返回null。如果您能弄清楚这一点，则可以成为一名JS教授，因为我的TA不能帮助我。