javascript - 类似jQuery函数来转换温度；但其中一个不起作用

Question

我正在为 FreeCodeCamp 做天气应用项目.我有两个类似的 jQuery 函数，可以将温度从开尔文转换为摄氏度，将开尔文转换为华氏度。这是 link to my CodePen .

当我单击摄氏度图标时，它会将值和图标转换为华氏度；但是当我点击华氏度按钮时，它什么也没做。

功能如下-

$("#c").click(function() {
  var fahrenheit = ((temp - 273.15) * 9 / 5) + 32;
  $("#temp").html(fahrenheit);
  $("#c").html(" °F");
  $("#c").attr("id", "f");
});

$("#f").click(function() {
  var celcius = temp - 273.15;
  $("#temp").html(celcius);
  $("#f").html(" °C");
  $("#f").attr("id", "c");
});

我尝试通过将输出打印到控制台来逐步调试代码。我还检查了 id 属性是否也被更改了。

这里可能出了什么问题？

Answer 1

点击按钮后，您正在将 #c 的 id 更改为 #f。这意味着当您将点击事件绑定(bind)到 #f 时，页面上没有与选择器匹配的元素。

处理此问题的标准方法是从页面上静态的父元素委托(delegate)事件。

委托(delegate)时，您将事件绑定(bind)到父元素，jQuery 使用事件冒泡来检测您正在单击的元素，并使用它自己的事件系统将触发针对动态元素的事件。

$('body').on('click', '#f', function(e) {
  var celcius = temp - 273.15;
  $("#temp").html(celcius);
  $("#f").html(" °C");
  $("#f").attr("id", "c");
});

使用 on 方法中的第二个参数，您可以指定要委托(delegate)给的子元素的选择器。