javascript - Javascript を使用した数値変更イベントの処理

Question

JavaScriptを学ぼうとしています。JavaScript コードで使用される数量を設定するために、Telerik の数値テキスト ボックスを使用します。

その数値テキスト ボックスで関数を呼び出すことができましたkeyup。この関数は、UnitPrice * Quantity のような小さな計算を行い、別のテキスト ボックスにこの計算の結果を入力します。

数値テキストボックスなので、増減ボタンがあります(下記参照)。

私のコードは、値を手動で変更すると機能しますが、上下のボタンで値を増減すると機能しません。

Javascript コードに次の行を追加しようとしましたが、数値テキスト ボックスが機能しなくなりました (ボタンを使用して増減しても何も起こりません)。

$("#@Html.FieldIdFor(model => model.Quantity)").onclick(OnQuantityChanged);

と

$("#@Html.FieldIdFor(model => model.Quantity)").onchange(OnQuantityChanged);

次は、手動で更新するときに機能する私の Javascript コードです。

<script type="text/javascript">
    $(document).ready(function ()
    {
        //Call OnQuantityChanged, when page has been refreshed.
        OnQuantityChanged();
        //Call OnQuantityChanged, on keyup event.
        $("#@Html.FieldIdFor(model => model.Quantity)").keyup(OnQuantityChanged);
    });

    //OnQuantityChanged event, multiplies quantity by unitPrice INCL. and unitPrice EXCL. for filling total value INCL. and EXCL.
    function OnQuantityChanged()
    {
        var quantity = parseInt(document.getElementById("@Html.FieldIdFor(model => model.Quantity)").value);
        if (quantity != null)
        {
            var unitPriceInclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceInclTax)").value);
            var unitPriceExclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceExclTax)").value);
            var SubTotalInclTax = String(quantity * unitPriceInclTax);
            var SubTotalExclTax = String(quantity * unitPriceExclTax);
            if (SubTotalInclTax != null)
            {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalInclTax)").value = String(SubTotalInclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalInclTax)").val(String(Math.round(SubTotalInclTax*1000) / 1000));
            }
            if (SubTotalExclTax != null)
            {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalExclTax)").value = String(SubTotalExclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalExclTax)").val(String(Math.round(SubTotalExclTax * 1000) / 1000));
            }
        }
    }
</script>

そのページの HTML は次のとおりです。

<table>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.UnitPriceInclTax):
                </td>
                <td>
                    @Html.HiddenFor(model => model.UnitPriceInclTax)@Model.UnitPriceInclTax
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.UnitPriceExclTax):
                </td>
                <td>
                    @Html.HiddenFor(model => model.UnitPriceExclTax)@Model.UnitPriceExclTax
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.Quantity):
                </td>
                <td colspan="2">
                    @Html.EditorFor(model => model.Quantity)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.SubTotalInclTax):
                </td>
                <td>
                    @Html.TextBoxFor(model => model.SubTotalInclTax, new { style="width:137px"})
                </td>
            </tr>
            <tr>
                <td>
                    @Html.NopLabelFor(model => model.SubTotalExclTax):
                </td>
                <td>
                    @Html.TextBoxFor(model => model.SubTotalExclTax,  new { style="width:137px" })
                </td>
            </tr>
        </table>

増加または減少ボタンが押されたときに計算を更新するには、どのイベントを使用できますか? または、これを達成する別の方法はありますか？

アップデート

oninputイベントを HTML で使用して増減を取得できると読んだので、次のコードを追加しました。

var quantityInput = document.getElementById("@Html.FieldIdFor(model => model.Quantity)");
        quantityInput.oninput = function()
        {
            alert("i got called, yay");
            var quantity = parseInt(document.getElementById("@Html.FieldIdFor(model => model.Quantity)").value);
            if (quantity != null) {
                var unitPriceInclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceInclTax)").value);
            var unitPriceExclTax = parseFloat(document.getElementById("@Html.FieldIdFor(model => model.UnitPriceExclTax)").value);
            var SubTotalInclTax = String(quantity * unitPriceInclTax);
            var SubTotalExclTax = String(quantity * unitPriceExclTax);
            if (SubTotalInclTax != null) {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalInclTax)").value = String(SubTotalInclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalInclTax)").val(String(Math.round(SubTotalInclTax * 1000) / 1000));
            }
            if (SubTotalExclTax != null) {
                @*document.getElementById("@Html.FieldIdFor(model => model.SubTotalExclTax)").value = String(SubTotalExclTax);*@
                $("#@Html.FieldIdFor(model => model.SubTotalExclTax)").val(String(Math.round(SubTotalExclTax * 1000) / 1000));
            }
        }
        }
        });

ソース

問題は、番号を手動で変更するだけではコードが呼び出されないことです。