在 Bootstrap 弹出窗口中获取表单输入值

如何解决在 Bootstrap 弹出窗口中获取表单输入值

我有以下 Bootstrap 弹出窗口的代码，

        $('#category-popover').popover({
            title: 'Add Category',html: true,content: $("#categoryFormContainer").html(),sanitize: false,}).on('click',function(){
          // had to put it within the on click action so it grabs the correct info on submit
          $('.click2save').click(function(){
            console.log($("#categoryForm").serialize());
            jQuery.ajax({
                type: "POST",url: '/inventorycategory/quicksave',data: {inv_category_name: $('#inv_category_name').val()},success: function(data)
                {
                    $('#category-popover').popover('hide')
                }
            })
          })
        })

在弹出窗口中显示的 HTML 下方，

        <div style="display: none">
            <div id="categoryFormContainer">
            <form id="categoryForm" autocomplete="off">
                @csrf
                <input type="text" class="form-control" name="inv_category_name" id="inv_category_name" required/>
                <div class="separator separator-dashed my-4"></div>
                <button type="button" class="btn btn-success mr-2 font-weight-bolder click2save">Save</button>
                <button class="btn btn-danger mr-2 font-weight-bolder closePopover">Close</button>
            </form>
            </div>
        </div>

现在的问题是，当我提交表单时，它以空表单值提交，

我无法使用 .serialise() 和 .val() 获取值？

这是怎么回事？