已创建DOM元素的ID无法使用问题技术咨询

看起来你遇到的问题是动态生成的按钮明明设置了ID，但点击事件就是没生效对吧？我帮你分析几个常见原因和对应的解决方案：

可能的原因1：事件绑定时机不匹配 #

虽然你的代码是先把按钮添加到DOM再绑定事件，但如果这段绑定代码是在DOM完全加载前执行的，或者.information容器本身也是动态创建的，那jQuery还是可能找不到目标按钮，导致事件绑定失败。

解决方案：用事件委托处理动态元素 #

对于动态生成的元素，最稳妥的方式是使用事件委托——把事件绑定到已经存在的父元素上（比如document或者.information容器），这样不管按钮什么时候被创建，点击事件都能被触发：

// 委托事件到.information容器，监听#change按钮的点击
$(".information").on("click", "#change", function() {
  let find = true;
  let c;
  if (find === true) {
    c = Math.trunc(s * 1.8 + 32); // s为初始摄氏度温度
    // 这里补充更新温度显示的逻辑，比如把c插入到对应元素中
    find = false; // 切换状态，下次点击转回摄氏度
  } else {
    // 添加转回摄氏度的计算逻辑
    c = Math.trunc((c - 32) / 1.8);
    find = true;
  }
});

可能的原因2：ID重复冲突 #

检查一下页面中有没有其他元素也使用了change这个ID，HTML规范里ID必须是唯一的，如果存在重复，jQuery只会选中第一个匹配的元素，你的按钮就会被忽略。

解决方案：设置唯一ID #

把按钮的ID改成页面独有的名称，比如temp-switch-btn，同时更新事件绑定的选择器：

// 创建按钮时设置唯一ID
crt.id = "temp-switch-btn";
// 绑定事件时使用新ID
$(".information").on("click", "#temp-switch-btn", function() {
  // 你的温度切换逻辑
});

可能的原因3：原生JS与jQuery混合的小问题 #

你同时用原生JS创建元素、jQuery绑定事件，虽然功能没问题，但可以统一写法减少混淆，比如直接用jQuery创建按钮：

// 用jQuery创建按钮更简洁
const $tempBtn = $("<button id='temp-switch-btn'>℃</button>");
$(".information").append($tempBtn);
// 直接给按钮绑定点击事件
$tempBtn.click(function() {
  // 温度切换逻辑
});

额外优化建议：状态变量的作用域管理 #

注意你的find、c这些变量，如果是在全局作用域还好，但如果是在某个函数内部，可能会出现作用域问题导致状态无法正确切换。建议把这些变量封装在闭包里，避免全局污染：

(function() {
  let find = true;
  const s = 25; // 示例初始摄氏度温度
  $(".information").on("click", "#temp-switch-btn", function() {
    let c;
    if (find) {
      c = Math.trunc(s * 1.8 + 32);
      $(this).text("℉"); // 同步切换按钮文本，提升用户体验
      find = false;
    } else {
      c = Math.trunc((c - 32) / 1.8);
      $(this).text("℃");
      find = true;
    }
    // 假设你有显示温度的元素，比如#temp-display
    $("#temp-display").text(c);
  });
})();

你可以先试试事件委托的方案，这是处理动态元素事件最可靠的方法，应该能解决你的问题。

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