2016-04-25 29 views
5

簡単な質問ですが、これを処理する正しい方法を探しています。入力タイプ= "番号"のjQuery

私はこの問題をまだ示していない最も単純な例に分解しました。

のは、私は基本的なHTMLテーブルがあるとしましょう:次のように

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

jQueryのredTextがに色を変更するための基本的なCSSであることと、次のとおりです。

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

それから私は、入力タイプ持っています赤。私はchangekeyupの両方のイベントを処理して、2つの状況をキャプチャしようとしています。問題がある

$(function() { 

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

}); 

、ときにユーザー種類期待どおりに動作する数値フィールドに数値。ただし、フォーカスを別の入力に変更すると、CSS に戻ります。彼らは代わりに数字のアップ/ダウンセレクタを使用する場合はコントロールがフォーカスを失った後

は、変更を持続します。

フォーカスを失ったときに手動で入力したときにjQueryセレクタが元に戻らないようにするには、何が欠けていますか?私はさまざまなfocusイベント(blurなど)を試しましたが、この動作を変更するものは見つかりませんでした。

+3

どのように '$( '#colorColumnRed')について。バインドだけならば( 'input''? – Rayon

+0

https://jsfiddle.net/rayon_1990/8euy18np/ – Rayon

+0

あなたはおそらくplunkrかそこら? –

答えて

1

@Rayon Dabreは、簡単で迅速な修正で迅速に答えました。

$('#colorColumnRed').bind('input') 
関連する問題