degree-section div绑定click事件监听器不生效无报错如何解决

核心问题原因 #

• 事件绑定时机错误：你将degree_section的点击事件绑定逻辑放在了异步请求函数getUrl内部，只有第一次搜索城市、接口请求成功后才会完成事件绑定，页面初始加载完成后点击该区域自然不会触发任何响应。
• 存在重复绑定风险：每次搜索城市且接口请求成功，都会重复给同一个元素绑定点击事件，后续点击会多次触发回调函数，造成逻辑异常。
• DOM选择器不够健壮：用firstElementChild获取目标元素依赖固定DOM结构，后续调整HTML层级很容易导致选择元素错误。

修复方案 #

1. 将点击事件绑定逻辑移到全局初始化位置，和搜索按钮的事件绑定同级，页面加载完成后直接绑定
2. 替换为更可靠的类选择器获取degree-section元素
3. 建议把接口返回的温度数据存在全局变量，方便点击切换温标时直接使用，无需重复请求接口

修改后的代码示例 #

let city = document.querySelector('#city');
let searchbtn = document.querySelector('.search-btn');
let city_name = document.querySelector('.city-name');
let temp = document.querySelector('.temp');
let feels_like = document.querySelector('.feels-like');
let humidity = document.querySelector('.humidity');
let locationIcon = document.querySelector('.weather-icon');
let checkbox = document.getElementById('celcius');
// 直接用类选择器获取目标元素，更可靠
let degree_section = document.querySelector('.degree-section');
let degree_section_span = degree_section.getElementsByTagName('span')[0];
// 全局存储温度数据，方便切换温标使用
let currentTempK = 0;
let currentFeelsLikeK = 0;
// 注意：你原代码缺失了url和apiKey变量定义，记得自行补上
const url = '你的接口请求地址前缀';
const apiKey = '你的接口密钥';

async function getUrl(city) {
  try {
    let theUrl = url + city + '&appid=' + apiKey;
    let response = await fetch(theUrl, {
      mode: 'cors'
    })
    let data = await response.json();
    // 把温度存到全局变量
    currentTempK = data.main.temp
    currentFeelsLikeK = data.main.feels_like;
    temp.textContent = currentTempK;
    feels_like.textContent = currentFeelsLikeK + "K";
    let humidity_data = data.main.humidity;
    humidity.textContent = humidity_data;
    let {
      icon
    } = data.weather[0];
    locationIcon.innerHTML = `<img src="icons/${icon}.png">`;
  } catch (err) {
    let error = document.createElement('span')
    error.className = "error";
    error.textContent = "Location does not exist"
    let top_center_div = document.querySelector('.top-center')
    top_center_div.appendChild(error)
    city_name.textContent = "No city found"
  }
}

// 点击事件移到外面全局绑定
degree_section.addEventListener('click', () => {
  console.log("c")
  // 温标切换逻辑示例
  const currentUnit = degree_section_span.textContent;
  if(currentUnit === 'K') {
    temp.textContent = (currentTempK - 273.15).toFixed(1);
    feels_like.textContent = (currentFeelsLikeK - 273.15).toFixed(1) + "℃";
    degree_section_span.textContent = '℃';
  } else {
    temp.textContent = currentTempK.toFixed(1);
    feels_like.textContent = currentFeelsLikeK.toFixed(1) + "K";
    degree_section_span.textContent = 'K';
  }
})

searchbtn.addEventListener('click', (e) => {
  let cityName = city.value;
  city_name.textContent = cityName
  console.log(cityName)
  getUrl(cityName)
})

额外注意事项 #

如果修改后仍存在点击无响应的情况，可以在浏览器控制台执行document.querySelector('.degree-section').click()测试是否触发日志，排查是否是CSS层级问题导致元素被遮挡、无法接收点击事件。

内容的提问来源于stack exchange，提问作者Albert