Javascript计算器在JSFiddle可用但HTML页面无响应（无报错）

我有一个JavaScript计算器，在JSFiddle中可正常运行，但整合到以下HTML页面后，拖动滑块时底部数值无法更新，且Chrome控制台无任何报错信息。尝试将JS代码放在</head>标签前，问题仍未解决。

原HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style><!--
    :root {
      /* ... */
    }
  --></style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>// <![CDATA[
    $(".calculator input").on("input change", function (event) {
      // ...
    });
    // ]]>
  </script>

</head>
<body>
  <div id="bmr-calculator" class="wrapper" style="margin-top: 100px; margin-bottom: 100px;">
    <!-- ... -->
  </div>
</body>
</html>

原因分析 #

核心问题是DOM加载顺序错误：当<head>中的JS代码执行时，<body>内的计算器DOM元素还未被浏览器解析渲染，导致jQuery选择器.calculator input找不到任何元素，事件绑定根本没有生效，自然不会触发数值更新逻辑。

解决方案 #

方案1：将JS代码移至<body>末尾 #

把事件绑定的JS代码放到<body>标签的最后，确保DOM元素完全加载后再执行代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <style><!--
    :root {
      /* ... */
    }
  --></style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</head>
<body>
  <div id="bmr-calculator" class="wrapper" style="margin-top: 100px; margin-bottom: 100px;">
    <!-- ... -->
  </div>

  <script>// <![CDATA[
    $(".calculator input").on("input change", function (event) {
      // ...
    });
    // ]]>
  </script>
</body>
</html>

方案2：使用$(document).ready()包裹代码 #

利用jQuery的就绪事件，确保代码在DOM树构建完成后再执行：

$(document).ready(function() {
  $(".calculator input").on("input change", function (event) {
    // 你的计算器逻辑代码
  });
});

直接替换原<head>中的JS脚本内容即可。

方案3：使用事件委托 #

将事件绑定到已存在的父元素（比如#bmr-calculator）上，借助事件冒泡机制，即使子元素后续加载也能触发事件：

$("#bmr-calculator").on("input change", ".calculator input", function (event) {
  // 你的计算器逻辑代码
});

这种方式适合动态加载DOM元素的场景，也能解决当前问题。

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