JS 中的 addEventListener 仅在刷新页面后起作用
addEventListener in JS only work after refresh the page
下面的代码应该按如下方式工作:
每次按下 'remove-btn' 按钮时,它都应该从 localStorage 中删除。
目前,该代码仅在页面在每次点击前接收到刷新时才有效。我怎么解决这个问题?
谢谢!
function renderLinksList() {
let linksList = ""; // creat an empty variable to manipulate the DOM outside
for (let i = 0; i < myLinks.length; i++) {
linksList += `
<li>
<a href="${myLinks[i]}" target="_blank">
${myLinks[i]}
</a>
<button class="remove-btn">
<svg class="close-icon" width="8px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
</svg></button>
</li >
`;
}
listEl.innerHTML = linksList;
}
const removeBtn = document.getElementsByClassName("remove-btn");
for (let i = 0; i < myLinks.length; i++) {
removeBtn[i].addEventListener("click", function () {
myLinks.splice(i, 1);
localStorage.setItem("myLinks", JSON.stringify(myLinks));
renderLinksList();
});
}
将添加事件侦听器的代码移至 renderLinksList()
,以便您创建的新按钮将获得事件侦听器。
function renderLinksList() {
let linksList = ""; // creat an empty variable to manipulate the DOM outside
for (let i = 0; i < myLinks.length; i++) {
linksList += `
<li>
<a href="${myLinks[i]}" target="_blank">
${myLinks[i]}
</a>
<button class="remove-btn">
<svg class="close-icon" width="8px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
</svg></button>
</li >
`;
}
listEl.innerHTML = linksList;
const removeBtn = document.getElementsByClassName("remove-btn");
for (let i = 0; i < myLinks.length; i++) {
removeBtn[i].addEventListener("click", function() {
myLinks.splice(i, 1);
localStorage.setItem("myLinks", JSON.stringify(myLinks));
renderLinksList();
});
}
}
下面的代码应该按如下方式工作: 每次按下 'remove-btn' 按钮时,它都应该从 localStorage 中删除。 目前,该代码仅在页面在每次点击前接收到刷新时才有效。我怎么解决这个问题? 谢谢!
function renderLinksList() {
let linksList = ""; // creat an empty variable to manipulate the DOM outside
for (let i = 0; i < myLinks.length; i++) {
linksList += `
<li>
<a href="${myLinks[i]}" target="_blank">
${myLinks[i]}
</a>
<button class="remove-btn">
<svg class="close-icon" width="8px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
</svg></button>
</li >
`;
}
listEl.innerHTML = linksList;
}
const removeBtn = document.getElementsByClassName("remove-btn");
for (let i = 0; i < myLinks.length; i++) {
removeBtn[i].addEventListener("click", function () {
myLinks.splice(i, 1);
localStorage.setItem("myLinks", JSON.stringify(myLinks));
renderLinksList();
});
}
将添加事件侦听器的代码移至 renderLinksList()
,以便您创建的新按钮将获得事件侦听器。
function renderLinksList() {
let linksList = ""; // creat an empty variable to manipulate the DOM outside
for (let i = 0; i < myLinks.length; i++) {
linksList += `
<li>
<a href="${myLinks[i]}" target="_blank">
${myLinks[i]}
</a>
<button class="remove-btn">
<svg class="close-icon" width="8px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
</svg></button>
</li >
`;
}
listEl.innerHTML = linksList;
const removeBtn = document.getElementsByClassName("remove-btn");
for (let i = 0; i < myLinks.length; i++) {
removeBtn[i].addEventListener("click", function() {
myLinks.splice(i, 1);
localStorage.setItem("myLinks", JSON.stringify(myLinks));
renderLinksList();
});
}
}