A simple question, but I'm looking for the right way to handle this.
I broke it down to the most simplified example, which 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 an input type:
<input id="colorColumnRed" type="number" />
jQuery looks like this: redText is basic CSS to change the color to red. I handle 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 that when a user types a number into a number field, he works as expected. However, if they then change focus to another input, CSS returns .
If they use the numerical up / down selector, this change is saved after the control loses focus.
What am I missing in the jQuery selector so that it does not return when manually entered when focus is lost? I tried various focus , blur events, etc. And I can’t find one that changes this behavior.
source share