Класс JQuery добавлен не сохраняется при изменении

Question

Я просто не могу понять поведение, я не гуру JQuery, и это дает мне головную боль. Таким образом, на мой документ, готовый я есть

$('#Table').on('change', '#TeamValue', function (event) { 
     $(this).removeClass("valid"); 
     $(this).addClass("input-validation-error"); 
     var myClass = $(this).attr('class'); 
     console.log(myClass); 
    } 
}); 

В консоли я вижу класс изменился, но на фронте это не так. Почему это происходит? Также я видел, что, когда я удаляю содержимое, класс ввода-проверки-ошибки выглядит хорошо ... я просто не понимаю. Может кто-нибудь дать мне руку?

Спасибо!

Ввода до изменения класса:

<input id='TeamValue' type='text' class='small-textbox'> 

консоль журнал:

text:a -.js:451:1 
wroing! -.js:456:13 
small-textbox input-validation-error 

HTML этого элемента после того, как его класс был изменен:

<input id="TeamValue" onkeyup="Restriction()" class="small-textbox valid" type="text"> 

Answer 1

$(this) контекста вы имеете в виду вероятно, является элементом #Table, а не #TeamValue элемент, который вы ожидаете. Мое предположение состоит в том, что вместо этого происходят изменения класса на этом элементе. Попробуйте установить обработчик изменения непосредственно к #TeamValue элемента:

$('#TeamValue').on('change', function (event) { 
    $(this).removeClass("valid"); 
    $(this).addClass("input-validation-error"); 
    var myClass = $(this).attr('class'); 
    console.log(myClass); 
}); 

`` `