jquery keyup event wont trigger add/removeClass

Question

У меня есть регулярное поле ввода, которое используется для фильтрации DataTable. У меня есть функция keyup на входе, которая вызывает fnFilter, я также хотел бы изменить цвет ввода, чтобы уведомить пользователя о том, что фильтр активен.

Это мой код:

CSS

.pn-input { 
     border-color:#4d4f53; 
} 

.pn-input-active { 
     border-color:#126C00; 
} 

JQuery

$('#searchfield').keyup(function() { 
    oTable.fnFilter($(this).val()); 

    if ($(this).val().length > 0) { 
     $(this).removeClass('pn-input'); 
     $(this).addClass('pn-input-active'); 
    } else { 
     $(this).removeClass('pn-input-active'); 
     $(this).addClass('pn-input'); 
    } 
}); 

fnFilter триггеры правильно для каждого символа, но вход не делает. Цвет изменяется только тогда, когда я нажимаю кнопку вне ввода текста.

Что я делаю неправильно?

Answer 1

Изменение CSS в

.pn-input { 
    border-color:#4d4f53!important; 
} 

.pn-input.pn-input-active { 
    border-color:#126C00!important; 
} 

сценария в

$('#searchfield').keyup(function() { 
    var Self=$(this); 
    oTable.fnFilter($(this).val()); 

    if ($(Self).val().length > 0) { 
     $(Self).addClass('pn-input-active'); 
    } else { 
     $(Self).removeClass('pn-input-active'); 
    } 
});