jQuery with Input Type = "Number"

Question

Simple question, but I am looking for the right way to handle this.

I've broken it down to the most simplistic example that still shows the problem.

Let's say I have a basic HTML table:

<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>

Then I have a input type:

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

The jQuery is as follows, with redText being basic CSS to change the color to red. I'm handling both the change and keyup events to try to capture two situations.

$(function () {

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

});

The problem is, when they user types a number into the numeric field it works as expected. However, if they then change focus to another input, the CSS reverts.

If they use the numeric up/down selector instead, the change persists after the control loses focus.

What am I missing with the jQuery selector to stop it from reverting when manually entered on losing focus? I've tried the various focus events, blur, etc and can't find one that changes this behavior.

Answer 1

@Rayon Dabre was quick to answer with the easy, quick fix.

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