jQuery - Нажатие на ссылку завершается неудачно, так как содержащий элемент заранее исчезает - PullRequest
Новая
       48

jQuery - Нажатие на ссылку завершается неудачно, так как содержащий элемент заранее исчезает

0 голосов
/ 06 февраля 2020

Я пишу простое поле для предложений для поля ввода. Когда я щелкаю в поле, под окном появляется скрытый элемент, содержащий некоторые ссылки, соответствующие содержимому поля.

Поле предложений запрограммировано на исчезновение, когда поле ввода теряет фокус.

Однако , когда я пытаюсь щелкнуть любую ссылку в окне предложения, поле ввода сначала теряет фокус, в результате чего окно предложения, содержащее все ссылки, исчезает, и событие щелчка «не достигает своей цели».

У меня есть попытался продемонстрировать это поведение здесь: https://jsfiddle.net/fugasjunior/cxh8bmp9/1/

<input placeholder="some text here">
<div class="hideme" style="display:none">
  <a href="google.com" target="_blank">Link to some site</a>
</div>

$("input").focus(function () {
  $(".hideme").css("display", "block");
});

$("input").blur(function () {
  $(".hideme").css("display", "none");
});

Моим временным решением было установить небольшой тайм-аут перед сокрытием элемента. Тем не менее, я думаю, что это слишком ненадежно и в целом не идеальное решение. Есть ли лучшее решение этой проблемы? Спасибо!

1 Ответ

0 голосов
/ 07 февраля 2020

Одно из решений - перехватить событие щелчка по ссылкам внутри <div> и изменить display на none. Например: 

$( "input" ).focus( function () {
    $( ".hideme" ).css( "display", "block" );
} );

$( ".hideme a" ).click( function () {
    $( ".hideme" ).css( "display", "none" );
} );

Как правило, каждый раз, когда нажимается ссылка внутри div (т. Е. .hideme a), <div> скрывается.

Однако, это может быть не желаемое решение, потому что тогда будет необходимо идентифицировать все события, связанные с сокрытием <div> (т. Е. Нажатие в другом месте на странице не будет скрывать <div> по умолчанию ). В качестве альтернативы элемент <input> можно изменить, чтобы получить .click, который включает и выключает отображение, так что пользователь также может повторно скрыть <div>, снова щелкнув элемент <input>.

Извините, что это может не полностью ответить на первоначальный вопрос.

...