Я пытаюсь сделать что-то очень простое. В основном у меня есть интерактивный div 'горячая точка, когда вы нажимаете, что он заполняет экран и отображает некоторый контент. Я достиг этого, просто изменив класс div, удаливместо' и добавиввыращенный» и там'немного 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 все еще выигрываетт добавитьместо' или удалитьвыращенный» хотя он добавит любые другие классы и удалит другие классы ... Я добавил предложение if, потому что я думал, что, возможно, обе функции запускаются одновременно, отменяя друг друга, но, похоже, это не имеет значения