on () не сработает, но все остальное работает?

Question

on () не сработает, но все остальное работает?

0

У меня есть div "# container1", который содержит кучу других, которые все ожидают при нажатии # container1. Однако для того, чтобы пользователь не смог сделать это дважды, я использовал .off("click"), чтобы отключить # container1.

Существует также div, называемый "# close1", который при нажатии анимирует все divs снова, но в противоположном направлении. Затем я хотел бы использовать .on("click"), чтобы снова "# container1" снова работать.

Проблема в том, что все остальное в функции close1() работает отдельно от .on("click"). Может кто-нибудь, пожалуйста, указать, что я делаю неправильно?

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

geoff_goode 25 сен. 2013, в 13:03

Источник

Теги:

jquery

3 ответа

1

у вас нет обработчика событий для click, .on() следует использовать как:

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

Sudhir Bastakoti 25 сен. 2013, в 09:04

0

Это должно быть так...

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

или

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

См. Документацию jQuery для on()...

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

Archer 25 сен. 2013, в 07:56

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-09-25T07-52-00.000Z

Использовать.one() для регистрации только обработчиков
Использовать пространства имен для обеспечения безопасности при отмене регистрации обработчиков
Просто вызов $(this).parent(".iconContainer1").on('click'); не будет регистрировать обработчик, используйте $(this).parent(".iconContainer1").off('click.open').one('click', open1); вместо

Пытаться

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