title: jquery keyup event wont trigger add/removeClass
body: <p>I have a regular input field that is used to filter a DataTable. I have a keyup function on the input that triggers <code>fnFilter</code>, i would also like to change the color of the input to notify the user that the filter is active.</p>
  
  <p>This is my code:</p>
  
  <p>css</p>
  
  <pre><code>.pn-input {
          border-color:#4d4f53;
  }
  
  .pn-input-active {
          border-color:#126C00;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('#searchfield').keyup(function () {
      oTable.fnFilter($(this).val());
  
      if ($(this).val().length &gt; 0) {
          $(this).removeClass('pn-input');
          $(this).addClass('pn-input-active');
      } else {
          $(this).removeClass('pn-input-active');
          $(this).addClass('pn-input');
      }
  });
  </code></pre>
  
  <p>The <code>fnFilter</code> triggers correct for each character, but the input does not. The color only changes when i click outside of the text input.</p>
  
  <p>What am i doing wrong?</p>