Kendo多个数字文本框样式

Question

我有多个数字文本框，这些文本框通过具有MVVM和模板的SPA架构在网格内呈现：

这是我的文本框模板：

<script type="text/x-kendo-template" id="numericEditableTemplate">
    <input id="#= UserId##= UserCode#"
         class="#= UserId##= UserCode#"
         data-role="numerictextbox"
         step="0.25"
         data-min="1.5"
         data-bind="value: CreditHours, events: { spin: onNumericEditChangeOrSpin, change: onNumericEditChangeOrSpin }"
    />
</script>

网格模板：

<script type="text/x-kendo-template" id="cpdGridTemplate">
<div id="cpdUserInfoGrid"
     data-role="grid"
     data-bind="source: gridData, events: { dataBinding: onDataBinding }"
     data-filterable="true"
     data-sortable="true"
     data-columns="[
        {
          'field': 'UserId',
          'title': 'User Id'
        },
        {
          'field': 'EmailAddress',
          'title': 'Email Address'
        },
        { 'field': 'PersonName',
          'title': 'Name'
        },
        { 'field': 'Hours',
          'title': 'Credit Hours',
          'template': $('#numericEditableTemplate').html(),
          'editable': true
        },
        { 'field': 'MatchedUserId',
          'title': 'Matched User ID',
          'template': $('#userIdEditableTemplate').html(),
          'editable': true
        }
     ]">
</div>
</script>

绑定到这些输入的我的viewmodel函数：

  onNumericEditChangeOrSpin: any = function (e) {
      var target = e.sender;
      var inputClass = target.element[0].class;
      $("." + inputClass).find("input").css("color", "red");
  };

我的问题是在spin and change事件上更改数字文本框的字体颜色。假设我有2个文本框，并且无论我更改哪个文本框都可以使用，但是一旦我更改了第二个文本框，然后在页面上的其他位置集中/单击，则第一个被更改的文本框的样式将恢复为原始样式。

似乎每次进行模糊/对焦时，它都将恢复为原始样式。