一页多张表格更新混凝土块？

Question

从图中可以看出，我在一页中有好几种表格。每个表单都有自己的带有注释列表的块。你知道吗

在通过表单成功添加新注释之后，我正在尝试AJAX/JQuery更新注释块。假设用户通过三维表单添加注释，AJAX需要更新三维表单下的三维注释块。下面你可以看到我的JS代码。你知道吗

问题是，当我对所有窗体（任务注释窗体）使用相同的id，而对所有注释块（任务注释）使用相同的id时，只有第一个窗体才能正常工作。当我提交第二个或第三个表单时，它会更新第一个注释块。我认为JS从上到下检查文档并找到第一个匹配项。你知道吗

当我对所有窗体和注释块使用同一个类时，它也会出错。例如，当我提交第二个表单时，所有3个注释块更新。你知道吗

那么如何将特定表单与特定注释块关联起来呢？

JS:

$(document).ready(function() {
    $('.submit').on("click", function() {
        event.preventDefault();
        console.log(event.preventDefault());
        var form = $(this).closest('form');
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    $("#task-comments").html(data.html_task_comment);
                }
                else {
                    $("#task-comment-form").html(data.html_task_comment_form);
                }
            }
        });
        $("#task-comment-form")[0].reset();
        return false;
    });
});

任务_列表.html：

<div class="list-group custom-list-group">
   <div class="list-group-item bg-faded">
      {% include 'project/task_comment_form.html' %}
   </div>
   <div id="task-comments-{{ forloop.counter }}">
      {% include 'project/task_comment_list.html' %}
   </div>
</div>

任务注释_表单.html：

<form method="post" id="task-comment-form-{{ forloop.counter }}" action="{% url 'project:task_comment_add' project_code=project.code group_task_code=group_task.code task_code=task.code %}">
     <button type="submit"></button>
</form>

任务注释_列表.html：

{% for comment  in task.comments.all %}
    <div class="list-group-item flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h6 class="mb-1">{{ comment.author }}</h6>
            <small>{{ comment.created }}</small>
        </div>
        <p class="custom-p">{{ comment.text }}</p>
    </div>
{% empty %}
    <div class="list-group-item flex-column align-items-start">
        <div class="d-flex w-100 justify-content-center">
            <h6 class="mb-1 custom-h"><i class="fa fa-info-circle" aria-hidden="true"></i>&#9;{% trans 'NO COMMENTS' %}</h6>
        </div>
    </div>
{% endfor %}

Answer 1

对多个DOM元素使用相同的ID是无效的。使用相同的类名是有效的，但会更新所有匹配的DOM元素。你知道吗

我的建议是，在每个表单和评论框中添加一个唯一的ID。如果你不想复制你的JS代码，那么在表单中添加一个标识符，你可以用它来决定更新哪个注释框。你知道吗

例如

<form id="task-comment-form-1" data-comment="task-comments-1">

在你的JS里，你可以这样做

$(document).ready(function() {
    $('.submit').on("click", function() {
        event.preventDefault();
        console.log(event.preventDefault());
        var form = $(this).closest('form');
        var commentBoxId = form.data('comment');
        var commentBox = $('#'+commentBoxId);
        $.ajax({
            url: form.attr("action"),
            data: form.serialize(),
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    commentBox.html(data.html_task_comment);
                }
                else {
                    form.html(data.html_task_comment_form);
                }
            }
        });
        form[0].reset();
        return false;
    });
});