JQuery selector odnoszący się do treści html wczytanej asynchronicznie

Question

Tworząc nowy projekt napotkałem się na pewien problem z selectorem jQuery. Mam formularz logowania działający asynchronicznie dlatego nie użyłem znaczników form bo nie chce żadnego odświeżania strony. Dane przesyłam AJAXem. Sam Formularz również jest wczytywany ajaxem z pliku php jako treść html.

div class="form-group">
    <label for="login1">Login lub email</label>
    <input class="form-control" type="text" id="login1">
</div>
<div class="form-group">
    <label for="pass1">Hasło</label>
    <input type="password" class="form-control" id="pass1">
</div>

To co chciałbym osiągnąć to aktywacje funkcji logowania po wciśnięciu enter. Korzystam z jquerry więc użyłbym $('#login1').keydown(event => { ... }); jednak to nie działa ponieważ formularz nie jest wczytany statycznie a jest dodany po załadowaniu strony. Czy ktoś wie dlaczego tak się dzieje i jak to ominąć?

Answer 1

Musiałbyś wykorzystać event delegation przy użyciu $.fn.on:

$( 'body' ).on( '#login1', 'keydown', handler );

Inna rzecz, że to, co chcesz zrobić, przeglądarka ma wbudowane. Wystarczy otoczyć pola w form i zablokować domyślną akcję na submit.

Comments

Jak dodać własną akcję submit?

---

Wykorzystując wspomniany już $.fn.on.

---

$( 'body' ).on( '#login1', 'keydown', function(){
    alert("work");
});

robię coś takiego i nic się nie dzieje. Czy źle użyłem tej funkcji?

---

Nie działało bo jako pierwszy argument podaje się akcję czyli keydown a jako drugi selektor.
 

$(document).on("keydown", '#login1, #pass1, #check1', function(event) { 
            if(event.which==13) {
                sign_manager.sign_in();
            }
        });

Teraz działa.

Answer 2

Wystarczy dodać listener z DOMContentLoaded i wtedy spróbować nasłuchiwać eventu keydown a #login1.

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Comments

Po załadowaniu strony, więc to zdarzenie tego nie chwyci.