JQuery-приложение не работает

Question

У меня есть некоторый JQuery AJAX-код, который берет содержимое текстовой области и добавляет его в базу данных MySQL.В конце этого я хотел бы добавить это содержимое к div.Этот div уже содержит другие divs, поэтому я думаю, что я должен использовать функцию .append(), чтобы добавить новый div.Тем не менее, это не работает.

.commentContainer - это div, к которому я хотел бы добавить ответ.Выходные данные comment.php:

 <div>$comment</div>

Jquery:

<script type='text/javascript'>
$('document').ready(function () {
       $("form").on("submit", function (e) {
         e.preventDefault();
         var $form = $(this);
         var commentbox = $(this).children('.commentBox');

         $.ajax({
             "url": $form.attr("action"),
             "data": $form.serialize(),
             "type": $form.attr("method"),
             success: function (response) {
                     commentbox.val('');
                     $(this).closest('.commentContainer').append(response);  //this line isnt working
               }
          });
     });
});
</script>

Answer 1

Поскольку вы уже кэшируете выбор $(this) в переменной $form, просто укажите его вместо использования $(this) повсеместно:

$('document').ready(function () {
    $("form").on("submit", function (e) {
        e.preventDefault();

        var $form      = $(this),
            commentbox = $form.children('.commentBox');

        $.ajax({
            url     : $form.attr("action"),
            data    : $form.serialize(),
            type    : $form.attr("method"),
            success : function (response) {
                commentbox.val('');
                $form.closest('.commentContainer').append(response);  //this line isnt working
            }
        });
    });
});

ОБНОВЛЕНИЕ

Спасибо за размещение вашего HTML, похоже, что элемент .commentContainer является родственным элементом form, поэтому вы хотите изменить:

$form.closest('.commentContainer').append(response);

На:

$form.siblings('.commentContainer').append(response);