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