Jquery追加语句不起作用

Question

我有一些 jQuery AJAX 代码，它获取文本区域的内容并将其添加到 MySQL 数据库。最后，我想将这些内容添加到 div 中。这个 div 里面已经有其他 div 了，所以我想我应该使用 .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

由于您已经在 $form 变量中缓存了 $(this) 选择，因此只需引用它而不是使用 $(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);