【发布时间】：2018-07-05 07:20:18
【问题描述】：
我的 JS let deletePostBtn = document.querySelectorAll('button[name="delete_post"]'); 顶部定义了一个按钮列表。我正在使用let，因为我认为它需要稍后重新定义。
单击时，此按钮调用e.preventDefault() 并使用我编写的自定义AJAX（在此处的帮助下）。
加载页面，点击DELETE按钮，一切正常，根据AJAX返回的数据库查询删除元素并重新加载元素。
现在问题来了。在AJAX 返回数据并加载元素后，单击的下一个按钮就像普通表单一样，不再调用我的addEventListener。我需要它调用 addEventListener 并让它再次运行 AJAX。
重要提示
现在，如果您查看脚本，您会注意到我在 get() Promise 中创建了两个 console.log()s。它嵌套在我的deletePostPromise() Promise 中。这两个console.log() 输出预期的数据。假设我有五个按钮，当点击它最初返回NodeList(5) [array of buttons]，然后它会返回NodeList(4) [array of buttons]。
我的猜测是我的let deletePostBtn = document.querySelectorAll('button[name="delete_post"]'); 需要稍后在脚本中重新定义，但我不确定在哪里。
JavaScript
let deletePostBtn = document.querySelectorAll('button[name="delete_post"]');
// GET REQUEST TO RETRIEVE EVERY POST
const get = (url) => {
return new Promise((resolve, reject) => {
const xhttp = new XMLHttpRequest();
xhttp.open('GET', url, true);
xhttp.onload = () => {
if (xhttp.status == 200) {
resolve(JSON.parse(xhttp.response));
} else {
reject(xhttp.statusText);
}
};
xhttp.onerror = () => {
reject(xhttp.statusText);
};
xhttp.send();
});
}
// DELETE SPECIFIC POST
const deletePostPromise = (url, postID) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = () => {
if (xhr.status == 200) {
console.log('if (xhr.status == 200)');
resolve();
} else {
reject(xhr.statusText);
}
};
xhr.onerror = () => {
reject(xhr.statusText);
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(postID);
});
}
// MAKING THE CALL TO DELETE THE POST
if (deletePostBtn) {
for (let i = 0; i < deletePostBtn.length; i++) {
deletePostBtn[i].addEventListener('click', e => {
e.preventDefault();
console.log(deletePostBtn); // Returns 'NodeList(5) [array]'
const displayPostWrapper = document.querySelector('.col-8.pt-4');
const displayPostSection = document.querySelectorAll('.col-8.pt-4 .row');
const postID = document.querySelectorAll('#delete-post-id');
deletePostPromise('http://localhost/mouthblog/ajax/delete_post.ajax.php', `id=${postID[i].value}`)
.then(() => {
console.log('JUST DELETED POST');
})
.then(() => {
get('http://localhost/mouthblog/api/blog.php')
.then(data => {
console.log(data);
displayPostWrapper.innerHTML = '';
data.map(x => {
displayPostWrapper.innerHTML += `<div class="row">
<article class="col-10 offset-1">
<h2 class="h2">${x.user_name}</h2>
<small>${x.date_created}</small>
<form class="" method="POST">
<button class="btn btn-danger" name="delete_post" type="submit">DELETE</button>
<input id="delete-post-id" name="post_id" type="hidden" value="${x.id}">
</form>
<hr>
<p class="lead">${x.content}</p>
</article>
</div>
`;
}); // map
let deletePostBtn = document.querySelectorAll('button[name="delete_post"]');
console.log(deletePostBtn); // Returns 'NodeList(4) [array]
})
.catch(error => {
console.log(error);
});
}).catch(error => {
console.log(error);
});
});
}
}
【问题讨论】：
-
一个建议 - 与其重绘所有在您删除某些内容时没有被删除的帖子，您可以删除那些删除的帖子吗？您的问题可能是由于没有在重绘的帖子删除按钮上设置事件处理程序，因此要修复 1）不要重绘帖子或 2）在重绘后将事件处理程序添加到所有新的删除按钮。
-
@James 你如何建议我为每个按钮添加一个事件处理程序，因为它们是动态创建的。将
onclick=添加到按钮本身以调用它？
标签： javascript ajax variables dom