javascript - Clicking on a removed class still sends out the click event -

when click on class called "vis", things start appear , other items disappear. when clicked on item, removes classes name "vis", item has been clicked gets new class called "clickyevent". thing is, when click on invisible item it's class has been removed ("vis"), click event still works , makes visible, causes bugs. (causes loads of bugs, i've put things in comments)

what want when click on circle (vis), other items dissapear (works) , when click on invisible item, nothing happens.

when click on button, goes state was. thing want, when click again on item i've clicked on (the 1 doesn't dissapear) goes normal state (same event button). (doesn't work)

this html

        <section class="pakketten">         <header>             <h1>pakketten</h1>         </header>         <button class="back">back</button>         <div class="pakket">             <div class="vis">                 <div class="circle">                     <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">                 </div>             </div>             <div class="invis-wrapper">                 <div class="invis">                     <h2>jets</h2>                     <p>een « jet pack », deze jets kun je aansluiten op jouw voertuig. door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>                 </div>             </div>         </div>         <div class="pakket">             <div class="vis">                 <div class="circle">                     <img src="_img/rockets.png" width="93" height="122" alt="rockets" name="rockets">                 </div>             </div>             <div class="invis-wrapper">                 <div class="invis">                     <h2>jets</h2>                     <p>een « jet pack », deze jets kun je aansluiten op jouw voertuig. door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>                 </div>             </div>         </div>         <div class="pakket">             <div class="vis">                 <div class="circle">                     <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">                 </div>             </div>             <div class="invis-wrapper">                 <div class="invis">                     <h2>jets</h2>                     <p>een « jet pack », deze jets kun je aansluiten op jouw voertuig. door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>                 </div>             </div>         </div>         <div class="pakket">             <div class="vis">                 <div class="circle">                     <img src="_img/bal.png" width="94" height="96" alt="bal" name="bal">                 </div>             </div>             <div class="invis-wrapper">                 <div class="invis">                     <h2>jets</h2>                     <p>een « jet pack », deze jets kun je aansluiten op jouw voertuig. door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>                 </div>             </div>         </div>         <div class="pakket">             <div class="vis">                 <div class="circle">                     <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">                 </div>             </div>             <div class="invis-wrapper">                 <div class="invis">                     <h2>jets</h2>                     <p>een « jet pack », deze jets kun je aansluiten op jouw voertuig. door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>                 </div>             </div>         </div>     </section> 

this js

    $(".vis").click(function () {     $(this).siblings(".invis-wrapper").css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 800);     $(this).siblings(".invis-wrapper").addclass("clicked");     // $(this).addclass("clickyevent");     $(".vis").not(this).addclass("invisfade");     $('.invisfade').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 800);     // $("div").removeclass("vis"); });  $(".clickyevent").click(function() {     removestuff();     console.log("ok"); });      $(".back").click(function() {       // $(".invis-wrapper:visible").fadetoggle(1000);       removestuff();     }); }  function removestuff() {       $('.invisfade').css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 800);       $(".clicked").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 800);       $(".clicked").removeattr("style");       // $(".clicked").addclass("vis");       // $(".invisfade").addclass("vis");       $("div").removeclass("clicked");       $("div").removeclass("invisfade"); } 

you want use delegation. way have bound click handler here, fact element no longer has class used select doesn't matter. selected elements based on criteria , attached event handler them. try instead:

$("section.pakketten").on("click", ".vis", function () {     $(this).siblings(".invis-wrapper").css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 800);     $(this).siblings(".invis-wrapper").addclass("clicked");     $(this).addclass("clickyevent");     $(".vis").not(this).addclass("invisfade");     $('.invisfade').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 800);     $("div").removeclass("vis"); });