inputに入力したものを即時反映させたい

こんにちは。
早速ですが質問をさせていただきます。
使っている言語はjavascript,jQueryです。
###前提・実現したいこと

単価と個数を入力することで「更新」「計算」といったボタンを押す必要なく、即時、随時、合計金額を算出するという計算を行えるようにすることがゴールです。
2つのinputに入力されたものをspanにて指定した箇所に吐き出させることで計算結果を確認します。
「計算」「更新」といったボタンを押すことなく、数値を入力した瞬間に適宜計算が自動でなされるように作成を行いたいです。
そのため、onkeyupを使って、即時計算がなされ、その結果が算出されるよう試みました。
しかし、通常の入力を行なった際は問題なく計算が実行されるものの、フォーム右の▲▼を用いて数値を変更した際は結果が反映されませんでした。

###発生している問題・エラーメッセージ
inputのtypeをnumberにしています。
フォームに直接数値を入力した際は問題なく計算が実行されるのですが、フォーム右の▲▼を使ってカチカチと数字を変更した場合、keyを使っていないため計算結果が即時反省されなくなってしまい困っています。
###該当のソースコード

HTML
1<div class="container">
2     <p>量</p>
3     <input id="quantity" type="number" size="40" onkeyup="update_field();"><br>
4     <p>単価</p>
5     <input id="price" type="number" size="40" onkeyup="update_field();"><br>
6     <p>合計金額</p>
7     <span id="total"></span>円です。
8</div>

Javascript
1function update_field(elem){
2    var result=$('#quantity').val()*$('#price').val();
3    $('#total').text(result);
4}

###具体的に教えていただきたいこと
numberについている▲▼を用いて数値を変更しても、変更後即座に計算結果が算出されるようにする方法を教えて頂きたいです。
検索を行なっても適切な解決策を見つけることができず、質問をさせて頂きました。
また、質問の仕方など不足している点ががございましたらご指摘頂けますと幸いです。
ご回答お待ちしております。

行動規範の内容に同意します

回答1件

ベストアンサー

せっかくJQueryを使ってるので、イベントをbindしましょう。

html
1<div class="container">
2     <p>量</p>
3     <input id="quantity" type="number" size="40"><br>
4     <p>単価</p>
5     <input id="price" type="number" size="40"><br>
6     <p>合計金額</p>
7     <span id="total"></span>円です。
8</div>

javascript
1function update_field(){
2    var result = $('#quantity').val() * $('#price').val();
3    $('#total').text(result);
4}
5$(function() {
6  $('input[type="number"]').on('keyup change', function() {
7    update_field();
8  });
9});