javascript - 输入类型为 "Number"的 jQuery

Question

简单的问题，但我正在寻找处理这个问题的正确方法。

我已将其分解为仍然显示问题的最简单的示例。

假设我有一个基本的 HTML 表格:

<table id="customerTable">
    <caption class="bg-primary h4">Customer Overview</caption>
    <thead>
        <tr>
            <th>Customer ID</th>
            <th>Customer Name</th>
            <th># Projects</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Enterprise Management</td>
            <td>14</td>
        </tr>
        <tr>
            etc ...
        </tr>
    </tbody>
</table>

然后我有一个输入类型:

<input id="colorColumnRed" type="number" />

jQuery 如下，redText 是将颜色更改为红色的基本 CSS。我正在处理 change 和 keyup 事件以 try catch 两种情况。

$(function () {

   $('#colorColumnRed').bind('change keyup', function () {
        var colId = $('#colorColumnRed').val();
        $('#customerTable td:nth-child(' + colId + ')').toggleClass('redText');
    });

});

问题是，当用户在数字字段中键入 一个数字时，它会按预期工作。但是，如果他们随后将焦点转移到另一个输入，则 CSS 还原。

如果他们改用数字向上/向下选择器，则在控件失去焦点后更改仍然存在。

我在 jQuery 选择器中缺少什么来阻止它在失去焦点时手动输入时恢复？我已经尝试了各种 focus 事件、blur 等，但找不到可以改变此行为的事件。

Answer 1

@Rayon Dabre 通过简单、快速的修复快速回答。

$('#colorColumnRed').bind('input')