尝试使用.appendTo（）将注释添加到注释列表

Question

这里是代码片段，我正在尝试将新注释附加到最后一条注释的末尾，我使用.val来捕获条目的值，但是当我单击提交按钮时它没有'把它添加到我在appendTo中使用的选择器（我只是首先尝试使用标题，因为我知道如果我可以获得标题，我可以让其余部分工作），感谢您的帮助，对此非常新。

     <div class="row newCommentForm" style="display:none" id="newCommentForm">
        <div class="comments-form col-md-6">
            <h2 class="title">Add your comment</h2>
            <form>
                <div class="form-group">
                    <label for="addCommentTitle">Title</label>
                    <input type="text" class="form-control" id="addCommentTitle" placeholder="Title">
                </div>
                <div class="form-group">
                    <label for="addCommentEmail">Email</label>
                    <input type="email" class="form-control" id="addCommentEmail" placeholder="Email">
                </div>
                <div class="form-group">
                    <label for="addCommentContent">Content</label>
                    <textarea type="text" class="form-control" id="addCommentContent" placeholder="Content"></textarea>
                 </div>

                <button type="submit" class="btn btn-default" id="newCommentSubmissionButton">Submit</button>
            </form>

        </div>

    </div>

这里是不起作用的javascript：

        sabio.page.startUp = function ()
    {
        var commentTitle = $('#addCommentTitle').val();                
        var commentEmail = $('#addCommentEmail').val();
        var commentContent = $('#addCommentContent').val();  
       $('#displayCommentsButton').on('click', function (event)
        {
            $(".comments").show();
            $('html, body').animate(
            {
                scrollTop: $(".comments").offset().top
            }, 2000);
            event.preventDefault();
        }
        );

        $('#addCommentButton').on('click', function (event)
        {
             $('#newCommentForm').show();
             event.preventDefault();
         }
         );

         $('#newCommentSubmissionButton').on('click', function (event)
         {
             $("<p>" + commentTitle + "</p>").appendTo('.row commentsContainer');
                event.preventDefault();
         }

             );