Как сделать чтобы по кнопке поиска можно кликнуть один раз?

Question

[olya_097]

Как сделать чтобы по кнопке поиска можно кликнуть один раз?
но после потери фокуса поиск также становился доступным
https://codepen.io/anon/pen/OYeXEG

Answer 1

[i1yas]

При клике добавляйте кнопке атрибут disabled
$('.main-header__search').attr('disabled', true);
При blur убирайте этот атрибут
$('.main-header__search').attr('disabled', false);

p.s. у вас поиск одинаковых селекторов по 2-3 раза повторяется, лучше их вынести в переменные, в начало скрипта. Это немного улучшит производительность, а главное улучшит читабельность кода

Comments

[olya_097]

i1yas, спасибо
а почему кнопка поиска дергается по клику?

[i1yas]

olya_097, если внесете изменения, по клику дергаться не будет. Она дергается при потере фокуса, причина в том, что у класса 'main-header__user' прописан transition для width длительностью 500 ms. При потере фокуса вы убираете класс 'main-header__user--active', тем самым мгновенно изменяете ширину данного элемента, анимация не успевает отработать, получается такое дерганье. Нужно ставить задрежку, код

[olya_097]

i1yas, спасибо
но дергается то по клику также

[Антон Усачев]

Только это не атрибут, а свойство, поэтому так:
$('.main-header__search').prop('disabled', true);