jQuery .on() doesn't work on Chrome

Question

In my View I have some dropdowns and an input that are tied to jQuery functions within a document.ready function.

<div class="form-group">
                    <label><strong>Post-Mitigation RAC</strong></label>
                    <div>
                        <label class="rac">Severity</label>
                        <select id="postRacSeverity" asp-for="PostSeverity">
                            <option value="">- Select -</option>
                            <option value="Catastrophic">Catastrophic</option>
                            <option value="Critical">Critical</option>
                            <option value="Moderate">Moderate</option>
                            <option value="Negligible">Negligible</option>,
                        </select>
                    </div>
                    <div>
                        <label class="rac">Probability</label>
                        <select id="postRacProbability" asp-for="PostProbability">
                            <option value="">- Select -</option>
                            <option value="LikelyToOccur">Likely to occur</option>
                            <option value="ProbablyWillOccur">Probably will occur</option>
                            <option value="MayOccur">May occur</option>
                            <option value="UnlikelyToOccur">Unlikely to occur</option>
                            <option value="Improbable">Improbable</option>
                        </select>
                    </div>
                    <div>
                        <label class="rac">Post-Mitigation RAC:</label>
                        <div><span asp-validation-for="PostRac" class="text-danger"></span></div>
                        <input class="rac"id="postRac" type="number" asp-for="PostRac" value="" readonly />
                    </div>
                </div>

jQuery:

$('#postRac').on('input', function () {
    getRiskAcceptor(); //will not fire in Chrome but works in IE
});

$('#OfficeID').change(function () {
    getRiskAcceptor(); //fires in both Chrome and IE
});

There is javascript that changes the postRac input value when different dropdown combinations of #postProbability and #postSeverity are selected. The getRiskAcceptor() is used to get a JSON object and return strings corresponding to name/email. The functionality works fine in IE, but not in Chrome.

I've tried multiple ways below to get it to work in Chrome without success.

//$(document).on("change", "#postSeverity", function () {
        //  getRiskAcceptor();
        //});
        //$(document).on("change", "#postProbability", function () {
        //  getRiskAcceptor();
        //});
        //$('#postRac').on('change', function () {
        //  getRiskAcceptor();
        //});
        //$("#postSeverity").change(function () {
        //  alert("entering #");
        //  getRiskAcceptor();
        //});
        //$('#postProbability').change(function () {
        //  getRiskAcceptor();
        //});

Answer 1

When you set the value of that input, make sure to explicitly trigger the change event on that

This should work

$(function(){

      $('#postRacSeverity').change(function () {
         var myValue = new Date().getSeconds();
         $('#postRac').val(myValue ).trigger('change');
      });

       $('#postRac').on('change', function () {
            console.log('value changed');
            getRiskAcceptors();
       });

});