Класс не обновляется в DOM, обработчик не работает должным образом

Итак, я не уверен, что это правильный подход, но я слышал, что с помощью встроенного onclick Обработчик, в отличие от обработчиков jquery, не очень хорошая идея.

У меня есть панель пользователей, с кнопкой для блокировки / разблокировки пользователей. Вот подход, который я использую, чтобы заблокировать их:

<script>
$('.fa-unlock-alt').parent().on('click', function () {
var $button = $(this)
var id = $button.attr('id').slice(12);
console.log($(this));$.ajax({
method: 'POST',
url: '/Websites/TimeTracking/Resources/PHP/Users/blockUser.php',
data: {idUser: id, status: 'Inactivo'},
success: function (result) {
if (result == "Exito") {
alert("El acceso del usuario ha sido bloqueado!");
$button.find('i').toggleClass('fa-unlock-alt fa-lock');
$button.removeClass('btn-outline-success').addClass('btn-outline-danger');
}
console.log(result);
},
error: function (exception) {
alert("No se pudo bloquear el acceso!");
console.log(exception);
}
})
})
</script>

У меня есть похожая функция, но она ищет .fa-lock вместо fa-unlock-alt, он делает аналогичные действия, но разблокировать вместо блокировки.

Как только DOM загружается, при первом нажатии на кнопку он работает правильно, ajax-вызов выполняется успешно, моя база данных обновляется соответствующим образом, и классы меняются, как предполагается, но всякий раз, когда я пытаюсь щелкнуть по нему снова, это не будет работать ,

Быстрая отладка показала мне, что даже когда браузер отображает нужные мне цвета и формы, DOM фактически имеет значение по умолчанию, зарегистрированное в свойствах элемента.

Есть ли другой подход, который я должен использовать?

Спасибо!