如何使用 ajax 为我的帖子动态添加评论？

Question

我正在尝试通过动态更新 cmets 的 ajax 请求将 cmets 添加到现有帖子中。每个帖子都加载了一个“data-post-id”属性，该属性保存了来自 Post eloquent 模型的 id。 data-post-id 工作得很好，因为当我通过 chrome 工具检查 html 元素时，我可以看到它包含帖子的 id，但是，我不确定如何选择包含特定 id 的帖子并添加一个新的给它评论 div。

<div posts>
   <div post data-post-id="">
        <div comments>
            <div comment>
             </div>
        </div>
    </div>
 </div>


  $(document).on("submit","#addComments", function (e){
        e.preventDefault();

        let comment = $("input[name=comment]").val();
        let _token   = $('meta[name="csrf-token"]').attr('content');
        let postID = $(this).attr('data-post-id');

        $.ajax({
            url:"/comments/" + postID,
            method:"POST",
            data:{
                comment:comment,
                _token:_token,
                postID:postID,
            },
            success:function(response){
                addNewComment(response,postID);
                $('#addComments')[0].reset();
                // console.log(response)
            }
        });

    });
function addNewComment(response,postID){
        var $comment = $commentTemplate.clone();
        $comment.find('[data-source="commentBody"]').html(response.comment.body);
        $comment.find('[data-source="commentCreatedTime"]').html(moment().startOf('second').fromNow());
        $('[posts]').find('[post][data-post-id="'+postID+'"]').closest('[comments]').append($comment.html());
       
    }

评论提交到这个url：

Route::post('/comments/{postID}',[CommentController::class,'store'])->name('addComment');

提交 cmets 的表单也有 data-post-id 属性，它的内容被每个帖子填充。

<form id="addComments" class="mb-2" data-post-id="">
      @csrf
      <div class="comment-input">
          <input type="text" 
           name="comment" class="form-control" 
           placeholder="Write a new comment">
       </div>
 </form>

Answer 1

我认为问题来自.closest('[comments]')。 closest 返回与作为参数传递的选择器匹配的最接近的 parent。

在您的情况下，[comments] 是 [post] 的孩子，因此请改用它

$('[posts]').find(`[post][data-post-id="${postID}"] > [comments]`).append($comment.html());