Reakcja na kliknięcie buttona i kliknięcie buttona.

Witam, mam w swojej małej aplikacji gdzie wyszukuje kogoś podając imie i nazwisko. Aktualnie działa reakcja na kliknięcie button, lecz mam problem z obsłużeniem przycisku enter.
Poniżej jest kod. Czy widzi ktoś w nim jakieś błędy ?

$("#search").on('keypress click', function(e) {

        var name= $('#id_name').val();
        var surname = $('#id_surname').val();
       
    if (e.which === 13 || e.type === 'click') {
      // Tutaj jest dalsza część kodu, która jest dosyć długa i nie chciałem jej przyklejać, ale reakcja na button poprawnie działa i wyszukuje to co trzeba.

Elementy DOM mogą mieć różne stany, np:

• focus - oznacza, że użytkownik jest skupiony na tym elemencie
• active - oznacza, że użytkownik podjął jakąś akcję z tym elementem
• hover - oznacza, że ktoś najechał na element

W przypadku przycisku przejścia między tymi stanami wyglądają tak:
brak stanu => następuje naciśnięcie lewego przycisku myszy na guzik => guzik zmienia swój stan na focus active => odpuszczamy lewy przycisk myszy => guzik przestaje być aktywny (status active) i ma tylko stan focus => klikasz poza guzik => guzik przestaje mieć stan focus

Demo tutaj: https://jsfiddle.net/07n9srcy/

Teraz wróćmy do Twojego problemu. Zrobienie

$("#search").on('keypress click', function () {});

powoduje, że nasłuchujesz na kliknięcie lub wciśnięcie przycisku na guziku. Kliknięcie to sprawa jasna, nic nie trzeba tłumaczyć, ale jak wcisnąć przycisk na guziku? Skąd przeglądarka ma wiedzieć, że akurat jak wciśniesz enter, to ma to coś wspólnego z tym guzikiem?

Guzik musi mieć stan focus. Użytkownik musi być "skupiony" na przycisku i kliknąć enter, żeby przeglądarka ogarnęła, że to właśnie ten enter nas interesuje i wywołała Twoją funkcję.

Twój kod zadziała, jeżeli najpierw wciśniesz przycisk, a później klikniesz enter. Spróbuj to zrobić używając dema, które wyżej zamieściłem. Kliknij przycisk i jak będzie zielony, to wtedy wciśnij enter.

Wnioskując po nazwie inputa, prawdopodobnie chcesz, żeby po wciśnięciu enter komuś coś wyszukało, więc w tym wypadku interesuje Cie kliknięcie enter, gdy użytkownik jest skupiony na polu tekstowym, a nie na guziku. Na guziku interesuje Cie tylko klik.

Oto demo nr dwa: https://jsfiddle.net/07n9srcy/1/

Oczywiście najlepszym rozwiązaniem jest użycie formularza. Przeglądarka ma już wbudowane zachowanie, to które starasz się odtworzyć. Gdy wciśniesz enter, to przeglądarka prześle formularz, gdy klikniesz przycisk, również zostanie wywołane zdarzenie submit na formularzu.

<form id="form">
  <input type="text" id="search">
  <button type="submit" id="btn">Click</button>
</form>

/*$('#btn').on('keypress', function() {
  alert('enter');
});

$('#search').on('keypress', function(e) {
  if (e.keyCode === 13) {
    alert('enter');
  }
});*/

$('#form').on('submit', function() {
  alert('enter');
});

Dzięki za obszerną odpowiedź :) Chyba coś zrozumiałem z tego :) Z tego wcześniejszego pliku usunąłem warunek IF i na #search dodałem samą reakcję na click. Natomiast w pliku html dodałem taki mały skrypcik :

 <script>

        $(document).ready(function () {
            $("#id_name").keypress(function (event) {
                if(event.keyCode == 13 ){
                    $("#searche").click();
                }
            });

        });

    </script>

I teraz to działa prawidłowo dla imienia, tylko teraz nie mam pomysłu w jaki sposób robić reakcję również na nazwisko ? Jak zrobić warunek po $ żeby reakcja była na "name || surname " ?

Możesz dodać klasę do elementu (np. autoenter czy coś) i dla tego elementu dać zdarzenie click

$("#element_nadrzedny .autoenter").keypress(function() {

Oczywiście musisz sobie to tak napisać, żeby kod był w miarę zoptymalizowany, chodzi tylko o przykład.

@pawlo00: kombinujesz jak koń pod górę. Zastosuj formularz, tak jak Ci wyżej napisałem :)
Demo

var $searchForm = $('#search-form');

$searchForm.on('submit', function(e) {
  e.preventDefault();

  var criteria = $(this).serializeObject();
  performSearch(criteria);
});

function performSearch(criteria) {
  alert(JSON.stringify(criteria));
}