Click function into click function

Question

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.....

$(".click2").function({ alert("bye"); }); Is not valid JavaScript. What exactly are you trying to achieve there? — Felix Kling
– Felix Kling, Commented Apr 13, 2014 at 18:18

bobthedeveloper · Accepted Answer · 2014-04-13 18:18:24Z

1

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

answered Apr 13, 2014 at 18:18

bobthedeveloper

3,7832 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3478007 Over a year ago

Yes, but how do I prevent this to happen?

fiction Over a year ago

make a variable that is set to true when you click, also then add a if ( true ) condition to the function

bobthedeveloper Over a year ago

take a look at @Nept hes answer, that should fix your problem.

Manwal · Accepted Answer · 2014-04-13 18:29:03Z

1

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

answered Apr 13, 2014 at 18:29

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Comments

fiction · Accepted Answer · 2014-04-13 19:42:08Z

1

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

edited Apr 13, 2014 at 19:42

answered Apr 13, 2014 at 18:27

fiction

1,0788 silver badges11 bronze badges

2 Comments

Felix Kling Over a year ago

So, what's the problem the OP is facing and how does your solution solve it? Your answer would be much more helpful if you provided an explanation as well.

fiction Over a year ago

@FelixKling maybe, but it's fairly simple, anyone who knows what an if statement is should be able to tell what i'm doing. I edited it anyway

Kevin Coulson · Accepted Answer · 2014-04-13 18:21:59Z

0

I think, his is what you are after:

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

answered Apr 13, 2014 at 18:21

Kevin Coulson

5483 silver badges11 bronze badges

Comments

Nept · Accepted Answer · 2014-04-13 18:20:36Z

0

Try this:

var click1 = false;

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

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

answered Apr 13, 2014 at 18:20

Nept

1032 silver badges11 bronze badges

2 Comments

user3478007 Over a year ago

I can use that method but the problem I get is that I have some value I need from first click function. taking those values and calling click 2. If I separate both cliks function, Then the whole system wont work....... :(

user3478007 Over a year ago

please, check my edit! I have put my orginal code there

stackunderflow · Accepted Answer · 2014-04-13 19:18:16Z

0

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

edited Apr 13, 2014 at 19:18

answered Apr 13, 2014 at 18:22

stackunderflow

3,8835 gold badges34 silver badges46 bronze badges

2 Comments

user3478007 Over a year ago

Is it possible to do it when I can click function into click function, without making two separate functions

stackunderflow Over a year ago

See the solution of@ Manwal, it's exactly what I meant, however Bind() and unbind() are deprecated as far as I remember, so use on() and off() functions

Collectives™ on Stack Overflow

Click function into click function

6 Answers 6

3 Comments

Live Demo

Comments

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

2 Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related