Ich habe eine Live-Ajax-Suche, aber wenn ich außerhalb der Suchleiste klicke, wird die Ajax-Suche nicht geschlossen. Ich verwende also die Focusout-Funktion, aber wenn ich auf Ajax Body klicke, wird die Focusout-Funktion ausgeführt. Ich muss die Focusout-Funktion ohne untergeordnete Elemente ausführen.

$("#ajaxsearch").focusout(function(){
      $("#d_ajax_search_results").hide();
    });
-1
Yavuz Selim Özmen 24 Feb. 2020 im 11:20

3 Antworten

Beste Antwort

Sie können einen Ereignis-Listener haben, der einen Klick auf das <body> -Element wie folgt abhört

$('body').on('click', function(){
    $("#d_ajax_search_results").hide();
});

Noch besser wäre es, wenn Sie Ihre Suchleiste öffnen und dem Body eine Klasse hinzufügen. Das Körperelement sieht also ungefähr so aus

<body class="search-bar-open">

Wenn der Benutzer die Suchleiste ausblendet oder schließt, entfernen Sie die Klasse erneut. Sie können toggle() oder addClass() / removeClass() verwenden, wenn Sie dies tun, können Sie dies ändern

$('body').on('click', function(){

Zu

$('body.search-bar-open').on('click', function(){

Dann wird dieses Ereignis nur ausgelöst, wenn die Suchleiste geöffnet ist.

1
caramba 24 Feb. 2020 im 12:17

Verwenden Sie das Ereignis blur

$("#ajaxsearch").blur(function(){
     $("#d_ajax_search_results").hide();
});
1
Abdelrahman Gobarah 24 Feb. 2020 im 08:27

Wenn Sie focusout verwenden möchten, sollten Sie Folgendes versuchen:

const input = document.getElementById('ajaxsearch');

input.addEventListener('focusin', (e) => {
  console.log('focusin');
});

input.addEventListener('focusout', (e) => {
  console.log('focusout');
});
<input type="text" id="ajaxsearch" />

Der alternative Weg ist focus() / blur() in jQ

0
Pedram 24 Feb. 2020 im 08:26