Estoy tratando de hacer algo muy simple. Básicamente, tengo un div 'hot spot' divisible al hacer clic, cuando llena la pantalla y muestra algo de contenido. Logré esto simplemente cambiando la clase de div, eliminando 'spot' y agregando 'grow' y hay una pequeña animación CSS para hacerla crecer. Esto funciona bien.

El problema es que, dentro de esta div, hay un botón de cierre, que en este momento es solo texto. Quiero que esto cambie las clases de nuevo, es decir, que elimine el lugar adulto y leído. No hace esto cuando se hace clic. Creo que tiene que ver con el elemento que no tiene esas clases cuando se carga el DOM, pero soy nuevo en jQuery y no sé cómo solucionarlo.

Creo que probablemente hay una manera mucho más sensata de hacerlo, ¿podría alguien dirigirme en la dirección correcta? Estaría muy agradecido. He intentado usar toggleClass en su lugar sin éxito.

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

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

ACTUALIZAR:

Estoy usando este código ahora,

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

extrañamente, la función close_button aún no agregará 'spot' o eliminará 'grown' aunque agregará otras clases y eliminará otras clases ... Agregué la cláusula if porque pensé que tal vez ambas funciones se activaban al mismo tiempo tiempo, deshaciéndose el uno al otro, pero parece no hacer ninguna diferencia