如何解决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 举报,一经查实,本站将立刻删除。