在负载上进行jQuery键计算的最佳有效方法

Question

使用jQuery keyup change函数，我制作了一个计算框，该框基于输入执行一定的计算。

，假设输入在页面加载时已经具有一些值。如果页面加载时输入不是空的，则最佳的有效方法也应显示该计算结果？

这是示例代码段：

$(document).ready(function() {
    $(document).on("keyup change", "#num1, #num2", function() {
        var num1 = $('#num1').val();
        var num2 = $('#num2').val();
        var cal = 20 * num1 * num2;
        $('#result').html('The reslut is ' + cal);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br>
Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>

Answer 1

触发它 - 我使用输入，因为它也可以处理粘贴

$(function() {
  $(document).on("input", "#num1, #num2", function() {
    var num1 = $('#num1').val();
    var num2 = $('#num2').val();
    var cal = 20 * num1 * num2;
    $('#result').html('The result is ' + cal);
  });
  $("#num1").trigger("input");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br> Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>

或者命名该功能并运行

function calc() {
  var num1 = $('#num1').val();
  var num2 = $('#num2').val();
  var cal = 20 * num1 * num2;
  $('#result').html('The result is ' + cal);
}
$(function() {
  $(document).on("input", "#num1, #num2", calc)
  calc();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Number 1: <input name="num1" id="num1" type="number" value="4"><br> Number 2: <input name="num2" id="num2" type="number" value="5"><br>
<div id="result"></div>