DOMContentLoaded 上的 window.addEventListener 无法正常工作 - JavaScript

问题描述

这是我的第一个 JavaScript 片段。我遇到了以下问题。 我正在尝试使用 Django Rest Framework 数据加载序列化，然后呈现问题列表和分页栏。我也有 likeQuestion、PaginationListener 和 SortingListener 函数。

在下面的代码片段中，我在 fetch 函数中执行了 likeQuestion、PaginationListener 和 SortingListener 函数。它有效，但由于它是递归的，因此每次点击都会导致多个 http 请求加倍（实际上只有 SortingListener 函数会这样，PaginationListener - 令人惊讶的是没有）。

我还尝试在 fetch 函数之外执行所有三个函数。它不起作用：当我尝试获取元素时，html 集合的长度为零。我用 window.addEventListener('DOMContentLoaded',(e) => {}) 试过了。还是不行。

在 fetch 函数之外，它仅适用于 setTimeout。但在这种情况下，PaginationListener 仅适用于第一次点击。而且超时似乎不是一个很好的决定。

我应该如何更改我的代码以使其顺利运行？

const url = document.getElementById('question-list').dataset.url
getQuestionList(url)


// Ask.index page loading
function getQuestionList(url) {
    const questionList = document.getElementById('question-list')
    fetch(url).then(response => response.json()).then(json => {

        // Questions List loading
        questionList.innerHTML = ''
        for(const question of json.results){
            date = new Date(question.date)
            const el = document.createElement('div')
            el.classList.add('row','justify-content-center','my-3')
            el.innerHTML = '<div>Question HTML</div>'
            const likeButton = el.querySelector('.like-btn')
            if(question.like){
                likeButton.classList.add('active')
            }
            questionList.appendChild(el)
        }

        // Pagination Links loading
        const pagination = document.getElementById('pagination')
        pagination.innerHTML = ''
        if (json.links.first){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.first + '">Первая</a></li>'
        } else {
            pagination.innerHTML += '<li class="page-item disabled"><a class="page-link text-primary" href="#" disabled>Первая</a></li>'
        }
        if (json.links.second_prevIoUs){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.second_prevIoUs + '">' + (json.current - 2) + '</a></li>'
        }
        if (json.links.prevIoUs){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.prevIoUs + '">' + (json.current - 1) + '</a></li>'
        }
        pagination.innerHTML += '<li class="page-item active"><span class="page-link bg-primary">' + json.current + '</span></li>'
        if (json.links.next){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.next + '">' + (json.current + 1) + '</a></li>'
        }
        if (json.links.second_next){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.second_next + '">' + (json.current + 2) + '</a></li>'
        }
        if (json.links.last){
            pagination.innerHTML += '<li class="page-item"><a class="page-link text-primary" href="' + json.links.last + '">Последняя</a></li>'
        } else {
            pagination.innerHTML += '<li class="page-item disabled"><a class="page-link text-primary" href="#" disabled>Последняя</a></li>'
        }

        likeQuestion()
        PaginationListener()
        SortingListener()
    })
}


function likeQuestion() {
    const button = document.getElementsByClassName('like-btn')
    Array.from(button).forEach(element => {
        element.addEventListener('click',() => {
            const url = element.dataset.url
            const request = new XMLHttpRequest()
            request.responseType = 'json'
            request.open('GET',url)
            request.setRequestHeader('X-Requested-With','XMLHttpRequest')
            request.send()
            request.onload = function () {
                if (this.status >= 200 && this.status < 400) {
                    if (this.response.auth) {
                        window.location = this.response.auth
                    } else {
                        element.querySelector('.like_count').textContent = this.response.like_count
                        if (this.response.add) {
                            element.classList.add('active')
                        } else {
                            element.classList.remove('active')
                        }
                    }
                } else {
                    console.log('Did not get anything')
                }
            }
            request.onerror = function () {
                console.log('Connection error');
            }
        })
    })
}

function PaginationListener() {
    const pagesLinks = document.getElementsByClassName('page-link')
    Array.from(pagesLinks).forEach(element => {
        element.addEventListener('click',(event) => {
            const url = element.getAttribute('href')
            if (url) {
                getQuestionList(url)
                window.scrollTo({top: 0,behavior: 'smooth'})
            }
            event.preventDefault()
        },false)
    })
}


function SortingListener(){
    const questionList = document.getElementById('question-list')
    const sortingField = document.getElementById('id_order_by')
    sortingField.addEventListener('change',(event)=>{
        const url = questionList.dataset.url + '?order_by=' + event.target.value
        getQuestionList(url)
    })
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）