在页面加载时触发 JS 函数不起作用

Question

我有两个函数在用户输入数据时触发。他们本质上是将他们选择的选项的值相加，然后输出它们。

特别是在此表单中，选项已经预先填充。因此，函数没有被触发，它们的计算结果为 null.

函数显示在正上方</body>

函数：

 $(calculateScore);
      function calculateScore () {
        var fields = $('.form-group #input').change(calculate);

        function calculate () {
          var score = 0;
          fields.each(function () {
            score += +$(this).val();
          });
          $('#score').html(score.toFixed(0));
        }
      }

      $(calculateHiddenScore);
      function calculateHiddenScore () {
        var fields = $('.form-group #input').change(calculate);

        function calculate () {
          var score = 0;
          fields.each(function () {
            score += +$(this).val();
          });
          $('#hidden_score').val(score.toFixed(0));
        }
      }

代码置于函数下方以尝试触发它们：

$(function () {
    calculateHiddenScore();
    calculateScore();
});

我也试过了：

window.onload = function () {
    calculateScore();
    calculateHiddenScore();
};

请问如何在页面加载后触发这两个函数？非常感谢。

Answer 1

DOM 就绪不会触发 onchange 事件，即使您的项目已预先填充。
因此，您必须像这样修改一下脚本：

function calculateScore() {
  var fields = $('.form-group #input'); // Cache only!

  function calculate() {
    var score = 0;
    fields.each(function() {
      score += +$(this).val();
    });
    $('#score').html(score.toFixed(0));
    $('#hidden_score').val(score.toFixed(0));
  }

  calculate();                    // Calculate ASAP (on DOM ready)
  fields.on("change", calculate); // and also on change
}


jQuery(function($) { // DOM is ready and $ alias secured
  calculateScore(); // Trigger
  // other jQuery code here
});

P.S：顺便说一句，即使上面的内容有所改进，在单个 ID #input 元素上循环使用 each 也没有多大意义 - 我会保留它给你...

在页面加载时触发 JS 函数不起作用

Triggering of JS functions on page load isn't working

javascript

onload