javascript - jQuery keyup事件不会触发add/removeClass

我有一个用于过滤DataTable的常规输入字段。我在输入上具有触发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触发每个字符正确，但输入不正确。仅当我在文本输入之外单击时，颜色才会更改。

我究竟做错了什么？

最佳答案

将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');
    }
});

关于javascript - jQuery keyup事件不会触发add/removeClass，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25279997/