JS - функция отправляет 2 POST-запроса

У меня есть JS функция, которая отправляет POST запрос

let username = document.querySelector('.fw-user').innerText;
    if (document.querySelector('.follow')) {
        let followButton = document.querySelector('.follow');

        followButton.addEventListener('click', () => {
            fetch(`/follow/${username}`, {
                method: 'POST',
            })
            .then(() => {
                window.location.reload();
            })
        })
    }

urls.py

path("follow/<creator>", views.follow, name="follow")

views.py

@csrf_exempt
@login_required
def follow(request, creator):
    if request.method == "POST":
        get_acc_id = User.objects.get(username=request.user.username)
        get_creator_name = User.objects.get(username=creator)
        follow = Followers.objects.create(follower_id=get_acc_id.id, creator=get_creator_name.username)
        get_creator_name.followers += 1
        get_creator_name.save()
        return HttpResponse(status=204)

html

<button type="button" class="follow btn btn-outline-light btn-sm">Follow</button>

Когда я нажимаю эту кнопку, функция посылает 2 POST запроса, вместо одного.

Скриншоты:

Network

Консоль

Проблема была не в fetch, а в том, что функция follow выполняется, когда загружается DOM, а у меня была другая функция с тем же обработчиком событий. Из-за этого обработчик события выполнялся несколько раз.

Вернуться на верх