Как корректно отследить фокус на поле или почему не работает условие if else?

Question

Есть простенький джс, где я при фокусе на инпуте вешаю класс на родителя, при использовании первого варианта работает лишь единожды, а вот условие if не работает вообще никак и не в каком виде, еще мне интересно почему первый вариант не сработает если вызвать через .is(':focus')?

codepen

Вариант 1

$('.sub-search__input').on('focus', function(){
    $(this).parent().addClass('focused')
})

Вариант 2

if ($('.sub-search__input').is(':focus')) {
        $(this).parent().addClass('focused'); 
    } else {
        $(this).parent().removeClass('focused')
 }

Answer 1

Попробуйте добавить событие blur элементу $('.sub-search__input') и в этом событии удалять класс родителю

$('.sub-search__input').on('focus', function() {
 $(this).parent().addClass('focused');
});

$('.sub-search__input').on('blur', function() { 
 $(this).parent().removeClass('focused');
});

Answer 2

В итоге добавил необходимый функционал с помощью следующего решения

$('.sub-search__input').click(function() {
    $(this).parent().addClass('focused');

    $(this).on('blur', function(){
        $(this).parent().removeClass('focused');
    });

    if ($(this).parent().hasClass('focused')) {
        // some code
    }

});

БЛОГ НА HUSL

Как корректно отследить фокус на поле или почему не работает условие if else?

Ответы (2 шт):