Элементы JavaScript добавляются несколько раз
Я создаю веб-приложение, используя Django, и одна из его веб-страниц позволяет пользователю комментировать чужие сообщения. Когда пользователь комментирует, я использую Javascript для добавления комментария в базу данных и отображения его среди других комментариев в div под названием "comment_list". Когда я комментирую под постом в первый раз, комментарий добавляется правильно, только один раз. Но когда я комментирую второй раз, не обновляя страницу, он добавляется дважды. В третий раз он добавляется трижды, в четвертый - 4 раза и так далее.
Это мой HTML код
<button class="btn btn-dark" id="comment_{{post.id}}" onclick="comment('{{ post.id }}')" >Comment</button>
<hr id="line1_{{post.id}}" style="display: none;">
<textarea class="form-control mb-2" id="comment_box_{{post.id}}" name="comment" style="display:none;" required></textarea>
<button id="comment_button_{{post.id}}" class="btn btn-dark" style="display:none;">Comment</button></br>
<hr id="line2">
<div id="comment_list_{{post.id}}">
{%for comment in comments%}
{%if comment in post.comments.all%}
<div>
<p style="margin-left: 1cm;">{{comment.user}} - {{comment.content}}</p>
</div>
{%endif%}
{%endfor%}
</div>
Это функция Javascript
function comment(id) {
document.querySelector(`#comment_box_${id}`).style.display = 'block';
document.querySelector(`#comment_button_${id}`).style.display = 'block';
document.querySelector(`#line1_${id}`).style.display = 'block';
document.querySelector(`#comment_${id}`).style.display = 'none';
document.querySelector(`#comment_box_${id}`).value=""
document.querySelector(`#comment_button_${id}`).addEventListener('click', () => {
fetch('/comment/' + id, {
method: 'PUT',
body: JSON.stringify({
post: document.querySelector(`#comment_box_${id}`).value
})
})
.then((res) => res.json())
.then((res) =>{
var com = document.createElement('div');
com.innerHTML = `<p style="margin-left: 1cm;">${res.user} - ${res.content}</p> `
document.getElementById(`comment_list_${id}`).appendChild(com);
document.querySelector(`#comment_box_${id}`).style.display = 'none';
document.querySelector(`#comment_button_${id}`).style.display = 'none';
document.querySelector(`#line1_${id}`).style.display = 'none';
document.querySelector(`#comment_${id}`).style.display = 'initial';
document.querySelector(`#comment_box_${id}`).value=""
})
});
}
А это функция Python
@csrf_exempt
@login_required(login_url='login')
def comment(request, post_id):
comment=Comment()
if request.method == "PUT":
data = json.loads(request.body)
if data.get("post") is not None:
comment.content = data["post"]
comment.user = request.user
comment.save()
post = Post.objects.get(id=post_id)
post.comments.add(comment)
post.save
return JsonResponse({'user': request.user.username, 'content': data["post"], "status": 201})
Я пробовал удалить слушателя событий после завершения действия и очистить переменную "com", но ничего из этого не помогло. Как я могу исправить эту ошибку?