Clicking on a removed class still sends out the click event

Question

When I click on a class called "vis", things start to appear and other items disappear. When clicked on that item, it removes all classes with the name "vis", only the item that has been clicked gets a new class called "clickyEvent". Thing is, when I click on an invisible item which it's class has been removed ("vis"), the click event still works and makes it visible, which causes bugs. (causes loads of bugs, so I've put those things in comments)

What I want is that when I click on the circle (vis), the other items dissapear (works) and when I click on an invisible item, that nothing happens.

When I click on the back button, everything goes back to the state it was. Another thing I want, is when I click again on the item that I've clicked on (the one that doesn't dissapear) it also goes back to normal state (same event as the back button). (DOESN'T WORK)

This is my 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 is my 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 can't click on classes, you click on elements, which also have the events attached. Setting `opacity` doesn't remove the element from the screen, you need to set `visibility: hidden`, if you don't want to detect clicks. — Teemu, Jun 03 '15 at 17:49
@Teemu All the circles (clickable units) are in line. Which means it's easy to know where they were once they are invisible. When you click on the place they were, it's starting to cause bugs. I could make a quick cast if you want to show you? — MrGreyGoose, Jun 03 '15 at 17:52
possible duplicate of [JQuery selector still working after I remove the class?](http://stackoverflow.com/questions/22237448/jquery-selector-still-working-after-i-remove-the-class) — showdev, Jun 03 '15 at 17:52

score 0 · Accepted Answer · answered Jun 03 '15 at 17:55

You want to use delegation. The way you have bound the click handler here, the fact that the element no longer has the class you used to select it with doesn't matter. You selected some elements based on some criteria and attached an event handler to them. Try this 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");
});

Clicking on a removed class still sends out the click event

1 Answers1