切换在重新加载后不适用于DOM呈现的HTML元素

Question

我正在制作一个天气应用程序，我想点击一个按钮在英制和公制之间转换。我还有一个搜索栏，当我输入一个位置时，会出现一个下拉菜单，我可以点击其中一个项目，HTML页面会重新加载新信息。

在单击任何下拉项(页面上有初始值(之前，切换按钮工作正常。但是，在我单击下拉项并重新加载页面后，该按钮仅适用于我直接写入.HTML文件的HTML元素。对于我通过DOM写入HTML的其他元素，它不起作用。

下面的相关代码。

async function init (name) {
await fetchCurrentData(name)
const forecastHoursList =  await hoursList(name)
document.querySelector('.forecast ul').innerHTML = renderHourlyForecast(forecastHoursList)
const forecastDailyList =  await dailyList(name)
document.querySelector('.future ul').innerHTML = renderDailyForecast(forecastDailyList)
}

// initial value
await init('Miami')

// toggle function below
const button = document.querySelector('button')
const hidden = document.querySelectorAll('span.hidden')
const visible = document.querySelectorAll('span.toggle')
button.addEventListener('click', event => {
hidden.forEach(el => {
el.classList.toggle('hidden')
el.classList.toggle('toggle')
})
visible.forEach(el => {
el.classList.toggle('hidden')
el.classList.toggle('toggle')
})

//Render data into HTML elements
const renderHourlyForecast = (forecastHoursList) => {
const renderedForecastList = forecastHoursList.map((el) => {
return `
<div>
<li>
<ul>
<li><h4>${el[0]}</h4></li>
<li><img src="${el[1]}"></li>
<li><span class="toggle" style="float: left">Temp °C</span><span class="hidden" style="float: left">Temp °F</span><h4 class="temp">${el[2]}</h4></li>
<li><span class="toggle" style="float: left">Feels °C</span><span class="hidden" style="float: left">Feels °F</span><h4 class="temp">${el[3]}</h4></li>
<li><span class="toggle" style="float: left">Wind kph</span><span class="hidden" style="float: left">Wind mph</span><h4 class="windspeed">${el[4]}</h4></li>
<li><span style="float: left">Cloud cover</span><h4>${el[5]}%</h4></li>
<li><span style="float: left">Precip chance</span><h4>${el[6]}%</h4></li>
</ul>
</li>
</div>
`
}).join('')
return renderedForecastList
}

//Searchbar input event below
const onInput = async event => {
const cityList = await autoComplete(event.target.value)
if(!cityList.length) {
dropdown.classList.remove('is-active');
return
}
resultsWrapper.innerHTML = ''
dropdown.classList.add('is-active');
for(let list of cityList) {
const option = document.createElement('a')
option.classList.add('dropdown-item')
option.innerHTML = renderOption(list)
//Dropdown click event below
option.addEventListener('click', async () => {
dropdown.classList.remove('is-active');
search.value = list[0];
await init(list[0])
});
resultsWrapper.appendChild(option)
}
}

Answer 1

该按钮仅适用于我直接写入.HTML文件的HTML元素。对于我通过DOM写入HTML的其他元素，它不起作用。

之所以会发生这种情况，是因为您使用了innerHTML+=作为DOM。如果完全重建主元素的子树，则事件处理程序将被销毁。最好使用event.target来检查单击的元素是否为下拉元素。

例如

const fruits = ['Pineapple', 'Coconut', 'Mango'],
list = document.querySelector('ul');
fruits.forEach(fruit => {
list.innerHTML += `<li>${fruit}</li>`
})
list.addEventListener('click', e => {
if (e.target.tagName.toLowerCase() === 'li')
e.target.innerText = e.target.innerText.split('').reverse().join('');
})

<ul>
<li>Apple</li>
</ul>