Невозможно щелкнуть ссылку внутри элемента, потому что размытие приводит к тому, что она тоже сначала исчезает (jquery)

Question

Я создаю динамический c поисковый ввод, который отображает результаты по мере их ввода. Проблема в том, что я добавил событие blur с jQuery, чтобы удалить затемненный фон и какой-либо другой стиль при потере фокуса на поле ввода.

Я также удаляю div, в котором есть результаты (потому что когда он не сфокусирован, нет смысла держать его на экране).

Внутри этого div есть теги привязки к странице результатов, но когда я нажимаю на них, div просто закрывается из-за blur и делает не открывать ссылку. Как я могу остановить это поведение?

My html:

<div id="searchresultfaq" class="searchresultfaq">
</div>

My jQuery, который использует размытие:

$("body").on("focus",".searchTerm2",function(e){
    $('.absoluteoverlay').show();
});

$("body").on("blur",".searchTerm2",function(e){
    $('.absoluteoverlay').hide();
    $( "#searchresultfaq" ).hide();
});

Часть, которая публикуется с Ajax и возвращает div с тегами привязки:

$('.searchTerm2').keyup(function(e) {
clearTimeout($.data(this, 'timer'));
    if($(this).val() == ''){
        $( "#searchresultfaq" ).hide();
    }else{
        if (e.keyCode == 13){
            searchfaq(true);
        }else{
            $(this).data('timer', setTimeout(searchfaq, 500));
        }
    }
});

function searchfaq(force) {
var zoekterm = $(".searchTerm2").val();
    $.ajax({
     type:'post',
     url:"includes/faqsearchresults.php",
     data:({zoekterm: zoekterm}),
     success:function(data){
         $( "#searchresultfaq" ).show().empty().append( data );
     }
 });
}

Я попытался удалить его, щелкнув absoluteoverlay, но это не сработало. Есть ли решение этой проблемы jquery?

Весь HTML (панель поиска и результаты, созданные ниже)

<div class="col-12">
  <div class="zoekblok">
    <div class="zoekblokwidth vertical-center">
      <div class="search" style="z-index: 1;">
        <input type="text" class="searchTerm2" placeholder="Zoek naar antwoorden" style="border: 2px solid rgb(210, 210, 210);">
        <button type="submit" class="searchButton" style="background: rgb(210, 210, 210); border: 2px solid rgb(210, 210, 210);">
          <i class="fa fa-search"></i>
       </button>
      </div>
     <div id="searchresultfaq" class="searchresultfaq" style="display: block;">
       <div class="absoluteresults">
         <span>Resultaten (9)</span>
       </div>
        <a href="https://google.nl" class="resultrow">
          <span class="resultcat">Wat is de levertijd?</span>
          <span class="resultcontent">De standaard levertijd is 5 productiedagen + 1 ...</span>
        </a>
        <a href="https://google.nl" class="resultrow">
          <span class="resultcat">Wat zijn de leveringsvoorwaarden?</span>
          <span class="resultcontent">Als je order bij ons binnenkomt dan beoordelen ...</span>
        </a>
        <a href="https://google.nl" class="resultrow">
          <span class="resultcat">Leveren jullie op feestdagen?</span>
          <span class="resultcontent">Wij leveren niet in het weekend, op feestdagen ...</span>
        </a>
        <a href="https://google.nl" class="resultrow">
          <span class="resultcat">Wanneer ontvang ik mijn factuur?</span>
          <span class="resultcontent">De factuur ontvang je na levering</span>
        </a>
        <a href="#" class="searchresultsbutton">
          <button type="button" class="btnstyle" name="button">Bekijk alle 9 resultaten</button>
        </a>
    </div>
   </div>
  </div>
</div>

Answer 1

Уловка, которая сработала для меня в аналогичном случае, заключается в использовании Event.preventDefault() на mousedown ссылки. Щелчок по-прежнему будет происходить, но не приведет к размытию.

Я не вижу кода, в котором вы создавали ссылки. Но с jQuery вы должны использовать что-то вроде этого в ссылках (элементы a):

$("a").on("mousedown", ev => ev.preventDefault());

Простой пример: ссылка будет отображаться, когда ввод сфокусирован, и на нее можно щелкнуть

$("#link").hide()
$("#input").on("focus", () => $("#link").show());
$("#input").on("blur", () => $("#link").hide());
$("#link").on("click", () => { alert("clicked"); console.log("clicked") });
// comment this out to see that the click won't be triggered without it
$("#link").on("mousedown",  ev => ev.preventDefault());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input">
<a href="javascript:" id="link">some link</a>