[HTML][Java]Funkcja modyfikująca DOM działa, gdy uruchamiana jest po pewnym czasie |
[HTML][Java]Funkcja modyfikująca DOM działa, gdy uruchamiana jest po pewnym czasie |
27.03.2020, 21:15:59
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
Wstawiłem działającą funkcję JS modyfikującą DOM na stronę w WordPressie. Nie działa. Jednak gdy odpalam ją po jakimś czasie (za pomocą setTimeout albo ręcznie w konsoli) to wtedy działa. Rozumiem, że to nie jest dobre rozwiązanie. Jak zatem uruchomić ją poprawnie?
|
|
|
27.03.2020, 21:40:14
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Zależy czy elementy, które modyfikujesz są ładowane wraz z kodem strony czy Ajax'em.
Jeśli to pierwsze, to modyfikacje należy przeprowadzić kiedy drzewo DOM jest załadowane - zdarzenie DOMContentLoaded. Jeśli to drugiej, to albo trzeba dostać się do funkcji, która uruchamia się po wykonaniu żądania Ajax, albo można użyć MutationObserver. -------------------- |
|
|
1.04.2020, 09:28:47
Post
#3
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) |
OK, dzięki. Sprawdzę to i dam znać jak będę gotów.
Na stronie https://www.freuciv.com/ po naciśnięciu przycisku "Tags" otwiera się flyout z listą uporzadkowaną alfabetycznie. Każda grupa słów zaczynających się na tę samą literę ma nagłówek składający się z tej litery. Powoduje to skrypt uruchomiany wraz z naciśnięciem przycisku "Tags". Jednak, gdy naciśnięmy którykolwiek z checkboxów, nagłówki znikają. Źeby nie znikały to wraz z naciśnięciem checkboxa skrypt także powinien być uruchamiany, zgadza się? Napisałem więc coś takiego: Kod function addEventToCheckboxes() { let list = document.querySelectorAll(".flyout-item .facetwp-checkbox") console.log(list) list.forEach(function(element) { element.addEventListener("click", tagsEvents) }) } addEventToCheckboxes() Funkcja tagsEvents() do dodawania nagłówków: Kod function firstLettersRemove() { let list = document.querySelectorAll("div.facetwp-facet-tags > h4") list.forEach(function(element) { element.remove() }) } function firstLetters() { const list = document.querySelectorAll("div.facetwp-facet-tags > div.facetwp-checkbox") const parent = document.querySelector("div.facetwp-facet-tags") let letterToCompare = "" list.forEach(function(element) { let firstLetter = element.textContent.charAt(0) let firstLetterUC = firstLetter.toUpperCase() let firstLetterHeaderText = document.createTextNode(firstLetterUC) if (letterToCompare != firstLetterUC) { let firstLetterHeader = document.createElement("h4") firstLetterHeader.appendChild(firstLetterHeaderText) parent.insertBefore(firstLetterHeader, element) } letterToCompare = firstLetterUC }) } function tagsEvents() { firstLettersRemove() firstLetters() console.log("Hello tagsEvents!") } Zdarzenie dodaje się poprawnie, ale funkcja tagsEvents() odpowiadająca za dodawanie nagłówków nie działa. Rozumiem, że to dlatego, że uruchamia ona się zanim skończy się wyszukiwanie, bo console.log("Hello tagsEvents!") wyświetla się poprawnie. Tutaj zastosowany jest AJAX, prawda? Więc co dalej? Piszesz, że "trzeba dostać się do funkcji, która uruchamia się po wykonaniu żądania Ajax, albo można użyć MutationObserver"? Gdzie znajdę tę funkcję? Mam pierwszy raz do czynienia z AJAX-em i nie bardzo wiem jak się do tego zabrać. O tym Mutation Observer muszę jeszcze poczytać, bo na razie wiem o nim niewiele. Do nawigacji facetowej używam wtyczki FacetWP. Tutaj jest trop: https://facetwp.com/documentation/developer...facetwp-loaded/ Kod (function($) { $(document).on('facetwp-loaded', function() { tagsEvents() console.log("Hello facetwp-loaded!") }); })(jQuery); Gdy uruchomię tę funkcję to tagsEvents() będzie się uruchamiała zawsze po zakończeniu jakiegokolwiek wyszukiwania poprzez FacetWP, a ja chciałbym, żeby urchamiała się tylko po kliknięciu któregokolwiek z checkboxów. Nie znam za bardzo jQuerry. Takie coś nie działa: Kod (function($) {
$(".facetwp-checkbox").on('facetwp-loaded', function() { tagsEvents() console.log("Hello facetwp-loaded!") }); })(jQuery); Ten post edytował stellatus 1.04.2020, 18:05:32 |
|
|
Wersja Lo-Fi | Aktualny czas: 28.04.2024 - 03:49 |