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

Question

[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 случаев код срабатывает. Так как же тут быть?
песочница

Comments

[monochromer]

Разместите код в песочнице

[leni_m]

monochromer, https://codepen.io/anon/pen/MraYmG

Answer 1

[0xD34F]

Что сейчас происходит: нажали на элемент списка, фокус на input'е потерялся, по соответствующему событию список закрылся, отжали кнопку мыши, наконец-то событие клика случилось, но, так как списка уже нет, клик получается по элементу, который скрывался за списком, так что обработчик клика по элементу списка не срабатывает.

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

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

пусть будет

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