CODEWITHSUNDEEP
jquery
geoff_goode
geoff_goode

Reputation: 45

on() won't fire but everything else does?

I have a div "#container1" that contains a bunch of others that all animate when #container1 is clicked. However in order to stop the user being able to do this twice, I have used .off("click") to deactivate #container1.

There is also a div called "#close1" that when clicked animates all the divs again but in the opposite direction. I would then like to use .on("click") to make "#container1" work again.

The problem is, everything else in function close1() works apart from .on("click"). Can somebody please point out what I am doing wrong?

function open1() {
    $(this).children(".teamIconBG1").css('visibility', 'hidden');
    $(this).children(".teamIcon1").stop(true, true).animate({
        "left": "-=25",
            "top": "-=25",
            "width": "190px",
            "height": "190px",
            "border-radius": "110px"
    }, 1000, 'easeOutElastic');
    $(this).children(".teamIconArrow1").stop(true, true).switchClass("teamIconArrow1", "teamIconArrow1_active", 500, "easeOutQuart");
    $(this).children(".teamIconTitle1").stop(true, true).switchClass("teamIconTitle1", "teamIconTitle1_active", 500, "easeOutQuart");
    $(this).children(".close1").stop(true, true).switchClass("close1", "close1_active", 500, "easeOutElastic");
    $(this).off("click");
}

function close1() {
    $(this).parent(".iconContainer1").on('click');
    $(this).parent(".iconContainer1").children(".teamIconBG1").css('visibility', 'visible');
    $(this).parent(".iconContainer1").children(".teamIcon1").stop(true, true).animate({
        "left": "+=25",
            "top": "+=25",
            "width": "140px",
            "height": "140px",
            "border-radius": "85px"
    }, 1000, 'easeOutElastic');
    $(this).parent(".iconContainer1").children(".teamIconArrow1_active").stop(true, true).switchClass("teamIconArrow1_active", "teamIconArrow1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".teamIconTitle1_active").stop(true, true).switchClass("teamIconTitle1_active", "teamIconTitle1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".close1_active").stop(true, true).switchClass("close1_active", "close1", 500, "easeOutElastic");

}

$("#container1").click(open1);
$("#container1").click(function () {
    $(".teamContent1").stop(true, true).switchClass("teamContent1", "teamContent1_active", 500, "easeOutQuart");
});

$("#close1").click(close1);
$("#close1").click(function () {
    $(".teamContent1_active").stop(true, false).switchClass("teamContent1_active", "teamContent1", 500, "easeOutQuart");
});

Upvotes: 0

Views: 61

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

  1. Use .one() to register once only handlers
  2. Use namespaces for safety when you de-register handlers
  3. Just calling $(this).parent(".iconContainer1").on('click'); will not register the handler, use $(this).parent(".iconContainer1").off('click.open').one('click', open1); instead

Try

function open1() {
    $(this).children(".teamIconBG1").css('visibility', 'hidden');
    $(this).children(".teamIcon1").stop(true, true).animate({
        "left": "-=25",
            "top": "-=25",
            "width": "190px",
            "height": "190px",
            "border-radius": "110px"
    }, 1000, 'easeOutElastic');
    $(this).children(".teamIconArrow1").stop(true, true).switchClass("teamIconArrow1", "teamIconArrow1_active", 500, "easeOutQuart");
    $(this).children(".teamIconTitle1").stop(true, true).switchClass("teamIconTitle1", "teamIconTitle1_active", 500, "easeOutQuart");
    $(this).children(".close1").stop(true, true).switchClass("close1", "close1_active", 500, "easeOutElastic");
}

function close1() {
    $(this).parent(".iconContainer1").off('click.open').one('click', open1);
    $(this).parent(".iconContainer1").children(".teamIconBG1").css('visibility', 'visible');
    $(this).parent(".iconContainer1").children(".teamIcon1").stop(true, true).animate({
        "left": "+=25",
            "top": "+=25",
            "width": "140px",
            "height": "140px",
            "border-radius": "85px"
    }, 1000, 'easeOutElastic');
    $(this).parent(".iconContainer1").children(".teamIconArrow1_active").stop(true, true).switchClass("teamIconArrow1_active", "teamIconArrow1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".teamIconTitle1_active").stop(true, true).switchClass("teamIconTitle1_active", "teamIconTitle1", 500, "easeOutQuart");
    $(this).parent(".iconContainer1").children(".close1_active").stop(true, true).switchClass("close1_active", "close1", 500, "easeOutElastic");

}

$("#container1").one('click.open', open1);
$("#container1").click(function () {
    $(".teamContent1").stop(true, true).switchClass("teamContent1", "teamContent1_active", 500, "easeOutQuart");
});

$("#close1").click(close1);
$("#close1").click(function () {
    $(".teamContent1_active").stop(true, false).switchClass("teamContent1_active", "teamContent1", 500, "easeOutQuart");
});

Upvotes: 1

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

you dont have event handler for click, .on() should be used like:

$(this).parent(".iconContainer1").on('click', function() {
  //do something
});

Upvotes: 1

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

It should be like this...

$(this).parent(".iconContainer1").on('click', functionName);

or

$(this).parent(".iconContainer1").on('click', function() {
    // do something here when clicked
});

See the jQuery documention for on()...

http://api.jquery.com/on/

Upvotes: 0

Related Questions