Przepowiedziana obsługa elementów w jQuery.on

Jak jest

Zdarza się, nawet często się zdarza, że część strony na którą wszedł użytkownik będziemy podmieniać dynamicznie. Nie mam na myśli jakiegoś SPA, tylko odrobina dynamiczności. W tej dynamicznej części mamy jakieś element(y), który chcemy obsłużyć w skryptach. Aby nie przesyłać za każdym razem HTML i skryptów do obsługi, można na początku wypluć kod javascript i od razu przypiąć się na wydarzenia generowane przez takie eventy. Jak?

jQuery

W jQuery – które ciągle żyje i ma się dobrze, pomimo wielu-wielu-WIELU frameworków które powstały i upadły w tym czasie, posiada metodę on(). Umożliwia ona dopięcie się do elementu na jakieś wydarzenie, na przykład on(“click”,…..) Pozwala także na dołożenie dodatkowego filtra dla pod elementu (nie wiem jak lepiej mogę to słownie wytłumaczyć), $(“.container”).on(“click”, “.button”,…..). Oznacza to, że mogę powiedzieć: chce słuchać na przykład kliknięć z mojego kontenera, w dodatkowym warunkiem że źródłem kliknięć musi być jakiś guzik. O ile w momencie przypinania obsługi on-click, sam kontener musi już być, o tyle guzik (pod-element) może pojawić się później.

Przykłady

Mając gdzieś na stronie taki kontener:

Przypinam się do niego i specyfikuje pod element, na którym mi zależy, a którego jeszcze nie ma:

Później gdzieś w częściowym widoku renderowany jest element, na który oczekuje:

Następnie (a w zasadzie poprzednio, ponieważ obsługa elementu już wcześniej została zdefiniowana) wstrzykiwany jest on do kontenera:

I tyle. W tym momencie, obsługa naciśnięcia guzika zostało przepowiedziana gdy on jeszcze nie został wygenerowany przez serwer. Jego losu zostały już dawno przesądzone.

Działający kod można zaciągnąć i obejrzeć na dostępym repozytorium:
https://github.com/jstadnicki/isthereanynews
Projekt który jest prowadzony w ramach #dajsiępoznać

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.