CODEWITHSUNDEEP
javascriptjqueryclick
user3478007
user3478007

Reputation: 63

Click function into click function

I thought that if I put one click function into click function it was only proceeding the second click function if it was clicked, but when I click the first the codes for second one is running... I thought that if i clicked the second one it should have run the codes. I mean when I clicked the second one then the codes are visible and doing as they should do, but If click like first function 3 times without to click the second and suddenly click on the second, it is behaving like the codes have run three times. 

$(".click1").click(function () {
    alert("hej");
    $(".click2").
    function ({
        alert("bye");
    });
});

My intention is to only make the second click to run when it is really clicked and not run the codes if I click the first one!

To be more clear. When I click first, it says hej and if I click three time then it will say hej 3x but when I suddenly click click2 it showing bye three times but I only clicked once.

Can anyone explain me why this is happening? and How i can prevent this to happen?

Thanks for the help!

EDIT!! 

function click_back() {

        current_question_for_answer.splice(0,1);
        $("#tillbaka_question").fadeTo("slow", 0.2);
        $("#tillbaka_question").off("click");
        $(".questions").hide();
        $(".containing_boxes").show();

        $(".answered_box").remove();

        var numbers_of_answered_question = history.length - 1;
        for (var i = numbers_of_answered_question; i > -1; i--) { 
            current_question.push(i);
            $(".containing_boxes").prepend('<div class="answered_box">'+i+'</div>');
            $("div.containing_boxes > div:nth-child("+history.length+")").css("background-color", "green");
            $(".containing_boxes").hide();
            $(".containing_boxes").fadeIn(100);
        }

        $("div.containing_boxes > div").not(":last-child").click(answered_box);
        $("div.containing_boxes > div:nth-child("+history.length+")").click(function () {

$("div.containing_boxes > div:nth-child("+history.length+")").click(function () { }) this function should only work if I click it. I can not seperate this code in two new function. If I do it, then the whole system will stop working.....

Upvotes: 0

Views: 163

Answers (6)

fiction
fiction

Reputation: 1078

The first click is attaching another click handler which means the second click will fire multiple times, so every time you click it you will get a lot of "bye"s. To avoid this, you can simply set a variable like var isClicked = 0 on load, and then before attaching the handler to click2, check if isClicked == 0, if true then set isClicked = 1 so it only works once

var isClicked = 0;

$(".click1").click(function () {
    alert("hej");
    if ( isClicked == 0 ) {
        isClicked = 1;
        $(".click2").
        function ({
            alert("bye");
        });
    }
});

Upvotes: 1

stackunderflow
stackunderflow

Reputation: 3873

Every time you click 1st button, You are registering click event for the 2nd button, so if you click 1st button 5x then 2nd button click event will be registered 5x

The solution is that You make sure that every time you click 1st button you unregister click event for 2nd button, then register it again

Upvotes: 0

Manwal
Manwal

Reputation: 23816

You should Unbind click event before binding New click event

$(".click1").click(function () {
    alert("hej");
    $(".click2").unbind('click');
    $(".click2").bind('click',function (){
        alert("bye");
    });
});

Live Demo

Upvotes: 1

Kevin Coulson
Kevin Coulson

Reputation: 548

I think, his is what you are after:

$(".click1").click(function () { alert("hej"); });
$(".click2").click(function () { alert("bye"); });

Upvotes: 0

Nept
Nept

Reputation: 103

Try this:

var click1 = false;

$(".click1").click(function () {
    alert("hej");
    click1 = true;
});

$(".click2").click(function() {
    if (click1 === true) {
        alert("bye");
        click1 = false;
    }
});

Upvotes: 0

bobthedeveloper
bobthedeveloper

Reputation: 3783

Because you clicked on click1 3 times, the click event on click2 is 3x created. Thats why it will alert 'bye' 3 times.

Upvotes: 1

Related Questions