Ajax点击事件：列出并发布数据

Question

我在我的页面上使用ajax。我都通过按钮单击事件发布和列出数据。

问题是，当我根据相关ID值发布第一条数据时，我看不到我添加的第一条数据（ajax get方法对我添加的第一条数据不起作用）。

当我刷新页面时，我添加的第一个数据就出现了，然后我添加的其他数据不需要刷新页面，我可以立即看到它。

列表和帖子都使用相同的点击事件。

<script>
        $("#btnAddComment").click(function () {
            let id = @Model.TaskLists.TaskID;
            let addValue = {
                CommentDetail: $("#txtCommentDetail").val(),
                TaskId: @Model.TaskLists.TaskID,
            }
            $.ajax({
                type: "Post",
                url: "/TaskList/AddComment/",
                data: addValue,
                success: function (addFn) {
                    $.ajax({
                        contentType: "application/json",
                        dataType: "json",
                        type: "get",
                        url: "/TaskList/GetComment/",
                        data: { TaskId: id },
                        success: function (getFn) {
                            let values = jQuery.parseJSON(getFn);
                            console.log(values);
                            let addDiv = "<div class='position-relative'>";
                            $.each(values, (index, value) => {
                                const getCreateDate = (`${value.CommentDate}`);
                                const dateTime = new Date(getCreateDate);
                                const formattedDateTime = `${('0' + dateTime.getDate()).slice(-2)}.${('0' + (dateTime.getMonth() + 1)).slice(-2)}.${dateTime.getFullYear()} ${('0' + dateTime.getHours()).slice(-2)}:${('0' + dateTime.getMinutes()).slice(-2)}`;
                                addDiv += `<div class="p-4 rounded-2 bg-light mb-3"><div class="d-flex align-items-center gap-3"><h6 class="fw-semibold mb-0 fs-4">${value.CommentUser}</h6><span class="fs-2"><span class="p-1 bg-muted rounded-circle d-inline-block"></span> ${formattedDateTime}</span></div><p class="my-3">${value.CommentDetail}</p></div>`;
                            });
                            addDiv += "</div>";
                            $(".position-relative").empty();
                            $("#divCommentDetail").html(addDiv);
                        }
                    });
                }
            });
        });
    </script>

div id="divCommentDetail" class="position-relative">
                                <div class="p-4 rounded-2 bg-light mb-3">
                                    <div class="d-flex align-items-center gap-3">
                                        <h6 class="fw-semibold mb-0 fs-4">@item.CommentUser</h6>
                                        <span class="fs-2"><span class="p-1 bg-muted rounded-circle d-inline-block"></span> @Convert.ToDateTime(@item.CommentDate).ToString("dd.MM.yyyy HH:mm")</span>
                                    </div>
                                    <p class="my-3">@item.CommentDetail</p>
                                </div>
                            </div>

控制台屏幕上没有返回任何错误。

Answer 1

<div id="divGetComment">
   <div id="divCommentDetail" class="position-relative">
      <div class="p-4 rounded-2 bg-light mb-3">
         <div class="d-flex align-items-center gap-3">
            <h6 class="fw-semibold mb-0 fs-4">@item.CommentUser</h6>
            <span class="fs-2"><span class="p-1 bg-muted rounded-circle d-inline-block"></span>@item.CommentDate</span>
         </div>
          <p class="my-3">@item.CommentDetail</p>
       </div>
    </div>

$("#divGetComment").html(addDiv);

当我使用上面的div时，问题就解决了。