Estou tentando fazer algo muito simples. Basicamente eu tenho um 'ponto de acesso' div clicável, quando você clica que preenche a tela e exibe algum conteúdo. Eu consegui isso simplesmente mudando a classe de div, removendo 'spot' e adicionando 'grown' e há um pouco de animação CSS para fazê-la crescer. Isso funciona bem.

O problema é que dentro dessa div existe um close_button, que no momento é apenas texto. Eu quero que isso mude as classes de volta - ou seja, remover o local crescido e lido. Não faz isso quando clicado. Eu acredito que tem a ver com o elemento não ter essas classes quando o DOM é carregado, mas eu sou novo no jQuery e não sei como resolver isso.

Eu acho que há provavelmente uma maneira muito mais sensata de fazer isso, alguém poderia me apontar na direção certa? Eu ficaria muito grato. Eu tentei usar toggleClass em vez disso sem sucesso.

$( document ).ready(function() {      
    $(".clickable").click(function() {  
        $(this).addClass("grown");  
        $(this).removeClass("spot");
    });   

    $(".close_button").click(function() {  
        alert (this);
        $("#spot1").removeClass("grown");  
        $("#spot1").addClass("spot");
    });   
});

ATUALIZAR:

Eu estou usando esse código agora

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

Estranhamente, a função close_button ainda não adicionará 'spot' ou removerá 'grown', embora ele adicione outras classes e removerá outras classes ... Eu adicionei a cláusula if porque pensei que talvez ambas as funções estivessem sendo ativadas ao mesmo tempo. tempo, desfazendo um ao outro, mas parece não fazer diferença