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很快回答了这个简单快捷的解决方案。

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