addClass i removeClass w jQuery - nie usuwa klasy
Próbuję zrobić coś bardzo prostego. Zasadniczo mam klikalny „gorący punkt”, gdy klikniesz, że wypełnia ekran i wyświetla jakąś treść. Osiągnąłem to, po prostu zmieniając klasę div, usuwając „spot” i dodając „grown”, i jest trochę animacji CSS, aby ją rozwijać. To działa dobrze.
Problem polega na tym, że wewnątrz tego div znajduje się przycisk close_button, który w tej chwili jest tylko tekstem. Chcę, żeby to przełączyło klasy - to znaczy usuń uprawiane i odczytane miejsce. Nie robi tego po kliknięciu. Wierzę, że ma to związek z tym, że element nie ma tych klas, gdy ładuje się DOM, ale jestem nowy w jQuery i nie wiem, jak to obejść.
Myślę, że prawdopodobnie jest to o wiele rozsądniejszy sposób, czy ktoś może wskazać mi właściwy kierunek? Byłbym bardzo wdzięczny. Próbowałem zamiast tego użyć toggleClass.
$( document ).ready(function() {
$(".clickable").click(function() {
$(this).addClass("grown");
$(this).removeClass("spot");
});
$(".close_button").click(function() {
alert (this);
$("#spot1").removeClass("grown");
$("#spot1").addClass("spot");
});
});
AKTUALIZACJA:
Używam tego kodu teraz,
$( document ).ready(function() {
$(document).on("click", ".close_button", function () {
alert ("oi");
$("#spot1").addClass("spot");
$("#spot1").removeClass("grown");
});
$(document).on("click", ".clickable", function () {
if ($(this).hasClass("spot")){
$(this).addClass("grown");
$(this).removeClass("spot");
}
});
});
Dziwne, że funkcja close_button nadal nie doda „spot” ani nie usunie „grow”, chociaż doda inne klasy i usunie inne klasy ... Dodałem klauzulę if, ponieważ myślałem, że obie funkcje były wyzwalane w tym samym czas, rozpadają się nawzajem, ale wydaje się, że nie ma to znaczenia