Я пытаюсь сделать что-то очень простое. По сути, у меня есть интерактивная div «горячая точка», когда вы нажимаете, что она заполняет экран и отображает некоторое содержимое. Я добился этого, просто изменив класс div, удалив spot и добавив Grow, и есть небольшая CSS-анимация для его роста. Это отлично работает.

Проблема в том, что внутри этого div есть кнопка close_, которая на данный момент является просто текстом. Я хочу, чтобы это переключило классы обратно - то есть удалило выросшую и прочитанную точку. Это не делает это при нажатии. Я считаю, что это связано с тем, что при загрузке DOM элемент не имеет этих классов, но я новичок в jQuery и не знаю, как обойти это.

Я думаю, что, возможно, есть гораздо более разумный способ сделать это, кто-то может указать мне правильное направление? Я был бы очень благодарен. Я попытался использовать 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");
    });   
});

ОБНОВИТЬ:

Я использую этот код сейчас,

$( 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");
        }
    });
});

странно, что функция close_button по-прежнему не будет добавлять 'spot' или удалять 'grow', хотя она добавит любые другие классы и удалит другие классы ... Я добавила предложение if, потому что я подумала, что, возможно, обе функции были запущены одновременно время, уничтожая друг друга, но это, кажется, не имеет значения