Javascript 当我第一次点击历史搜索时，为什么页面会刷新？

这里是新的编码员

我正在创建一个天气仪表盘，在您搜索每个城市后，它会保存每个城市的历史记录。我应该能够点击我以前搜索过的城市，让它“重新搜索”该城市，并给我预期的结果。但由于某种原因，当我点击我以前搜索过的城市时，它会重新加载页面。但是，cnce页面会重新加载按钮，以按预期搜索以前的条目，但我不知道如何使按钮工作，而不是重新加载然后工作。（我已尝试使用event.preventDefault（））

谢谢你的帮助

HTML

天气仪表盘
天气仪表盘
搜索城市

清晰的历史

JAVASCRIPT

$（文档）.ready（函数（）{
var-APIKey=API；
var cityName；
$（“#搜索按钮”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
event.stopPropagation（）；
城市名称=$（“#城市输入”）.val（）；
如果（城市名称！==“”）{
渲染器（）；
renderForecast（）；
自动保存历史（）；
};
});    
函数renderWeather（）{
变量queryURL=”http://api.openweathermap.org/data/2.5/weather?q=“+cityName+”&appid=“+APIKey”
$.ajax({
url:queryURL，
方法：“获取”
}).然后（功能（响应）{
//console.log（queryURL）；
//控制台日志（响应）；
var cityName=response.name；
var icon=response.weather[0]。图标；
变量iconURL=”https://openweathermap.org/img/wn/“+图标+”.png”
var temp=响应主温度；
var湿度=响应。主。湿度；
var风速=响应风速；
var lat=response.coord.lat；
var lon=response.coord.lon；
var uvQuery=”http://api.openweathermap.org/data/2.5/uvi?lat=“+lat+”&lon=“+lon+”&appid=“+APIKey
//紫外线指数API
$.ajax({
url:uvQuery，
方法：“获取”
}).然后（功能（响应）{
var UV=响应值；
UV=数量（UV）；
如果（UV>=8）{
$（“#UV val”）.addClass（“危险区”）；
}否则{
$（“#UV val”）。移除类（“危险区”）；
$（“#UV val”）.addClass（“安全区”）；
};
$（#UV val”）.text（“UV索引：+UV）；
});
温度=编号（温度）
温度=（数学四舍五入（（温度-273.15）*9/5+32））
$（“#城市名称”）.text（城市名称+”+（矩（）.format（“（MM/DD/YY）”）；
$（“天气图标”）.attr（“src”，iconur）；
$（“#温度”）.text（“温度：+temp+”\u00B0F”）；
$（“#湿度”）。文本（“湿度：“+湿度+”%）；
$（“风速”）.text（“风速：“+风速+”英里/小时”）；
});
};
函数renderForecast（）{
变量fiveDayQuery=”http://api.openweathermap.org/data/2.5/forecast?q=“+cityName+”&appid=“+APIKey”
$.ajax({
url:fiveDayQuery，
方法：“获取”
}).然后（功能（响应）{
//控制台日志（响应）；
$（“#添加预测”）.text（“”）；
风险值天数=0；
对于（变量i=4；i<37；i+=8）{
var预测=$（“”）；
forecast.addClass（“col forecast bg主文本白色ml-3MB-3四舍五入”）；
var dateP=$（“”）；
var iconP=$（“”）；
searchItem.addClass（“行”）；
var searchButton=$（“”）；
searchButton.attr（“索引名”，cityName）；
searchButton.addClass（“历史btn”）；
searchButton.text（城市名称）；
searchButton.addClass（“btn btn主btn lg”）；
css（{“文本转换”：“大写”，“边距”：“5px”}）；
searchItem.append（searchButton）；
$（“#历史”）.append（searchItem）；
};
};
函数autoSaveHistory（）{
searchHistory.cityName.push（cityName）；
setItem（“search”，JSON.stringify（searchHistory））；
addHistoryItems（）；
}
$（“.history btn”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
控制台日志（“已检查”）
cityName=$（this.attr（“索引名”）；
渲染器（）；
renderForecast（）；
});
$（“#清除历史记录”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
localStorage.clear（）；
$（“#历史”）。文本（“”）；
搜索历史={
“城市名称”：[]
};
setItem（“search”，JSON.stringify（searchHistory））；
});
});

因为当单击城市项目时，它会触发默认行为：表单提交

因此，

event.preventDefault（）

需要表单中的summit处理程序，而不是按钮单击处理程序，如下所示：

$('form#history').submit((event) => {
   event.preventDefault();
   // ....
})

---

顺便说一句，对于jquery，返回false也有同样的效果。

逐个检查历史btn事件函数。我想问题出在renderWeather（）函数中。首先禁用它，然后尝试一个预测，如果不禁用预测和检查天气。这会导致我无法单击历史搜索按钮。