Удалите класс, если пользователь нажимает на div.

Question

У меня есть вход для поиска, и я спрятал кнопку отправки. Вместо этого, когда пользователь нажимает введите, выпадающий список появляется в результате, используя следующие JS:

$(function() { 
    $("form input").keypress(function (e) { 
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
     $(this).next("#searchResult").addClass('show'); 
     return false; 
    } else { 
     return true; 
    } 
    }); 
}); 

Как убедиться, что класс .show удаляется, если пользователь щелкает за пределами #searchResult?

Answer 1

Вы можете использовать blur событие для обнаружения, когда элемент теряет фокус:

$("#searchResult").on("blur", function(){ 
    // The users focus is no longer on this element! 
}); 

Вы также можете написать это как:

$("#searchResult").blur(function(){ 
    // The users focus is no longer on this element! 
}); 

Это, конечно, при условии, что #searchResult элемент имел пользователи ориентируются на начало.

Ссылка:

• blur()

Answer 2

Вы можете попробовать это,

$("body:not(#searchResult)").click(function(){ 
    $("#searchResult").removeClass("show"); 
});