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);