leni_m
@leni_m
ЧупаКобрус

Как решить проблему с фокусом?

Есть input, при фокусе и при вводе которого появляются подсказки в блоке с классом helps ниже.
А при потере фокуса подсказки закрываются.
$('body').on('focus input', 'input', function () {
        var params = {
            data: $(this).val()
        };
        $.ajax({
            type: "POST",
            url: "...",
            data: params
        })
            .done(function (data) {
                // если есть подсказки
                if (data.length != 0) {
                    $(".helps").html(data).slideDown(100);
                }
            });
    }).on('focusout', 'input', function () {
        $(".helps").slideUp(100);
    });

И при клике на подсказку хочу заполнять input автоматически.
$('body').on('click', '.help', function () {
        var info = ... ;
        $('input').val(info);
    });

Но почему-то срабатывает это очень редко. Я так понимаю при клике по подсказке мы теряем фокус, и срабатывает код, который закрывает подсказку. И клика не происходит. Но гдет в 1 из 10 случаев код срабатывает. Так как же тут быть?
песочница
  • Вопрос задан
  • 151 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Что сейчас происходит: нажали на элемент списка, фокус на input'е потерялся, по соответствующему событию список закрылся, отжали кнопку мыши, наконец-то событие клика случилось, но, так как списка уже нет, клик получается по элементу, который скрывался за списком, так что обработчик клика по элементу списка не срабатывает.

Вместо клика обрабатывайте нажатие кнопки мыши, вместо

$('body').on('click', '.help'

пусть будет

$('body').on('mousedown', '.help'
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы