为什么这个javascript/jquery没有捕获用户输入?

我不明白为什么用户输入 搜索字段 当我进行查询时,不会捕获输入框。当我控制台注销时奎尔输入框中的查询不存在。请参阅下面的代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
    <title>Document</title>

</head>

<body>
    <div class="container">
        <h1>gifTastic!</h1>
        <label for="search-field">Find a TV Show: </label>
        <input type="text" id="search-field">
        <input id="find-giphy" type="submit" value="giphy Search">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        var baseURL = "http://api.giphy.com/v1/gifs/search?q="
        var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
        var input = $("#search-field").val();
        
        var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";

        $("#find-giphy").on("click", function () {
            $.ajax({
                url: queryURL,
                method: "GET"
            }).then(function (response) {
                console.log(response);
                console.log(queryURL);
            })
        })
    </script>
</body>

</html>