How to fix the recursion problem in jQuery code

Question

I have been on a game project for a while. I have used bootstrap and jQuery. But to keep it simple, here is what the piece of code in which I did not understand anything looks like. I wanted that by clicking and only clicking on item A, item B will show and disappear after clicking on it. I added an instruction that will show me after every click on an item a message in the console and watch what happens!

let elt_boxOne = $("#bx_one");
let elt_boxTwo = $("#bx_two");
elt_boxTwo.hide();

elt_boxOne.click($.proxy(function() {
  elt_boxTwo.show();
  elt_boxTwo.click($.proxy(function() {
    console.log("Hello world");
    elt_boxTwo.hide();
  }, this));
}, this));

/*As you can see the first time has no problem but if we try the second time there will be two messages and the third click will show three etc... I mean what the hell is going on???*/

#bx_one {
  width: 200px;
  height: 50px;
  background-color: red;
  text-align: center;
  font-weight: bold;
}

#bx_two {
  width: 200px;
  height: 50px;
  background-color: orange;
  text-align: center;
  font-weight: bold;
}

<div id="bx_one">Box one</div>
<div id="bx_two">Box two</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Does this answer your question? Assigning a click-event-handler inside a click-event — Heretic Monkey
– Heretic Monkey, Commented Jan 8, 2021 at 13:59

V. Sambor · Accepted Answer · 2021-01-08 13:52:46Z

2

You are initializing the click listener to many times, when you click on button 1. You have to move it outside, independent of the first click handler... like this:

BTW, you don't need proxies, you can use arrow functions if you need the context inside.

let elt_boxOne = $("#bx_one");
let elt_boxTwo = $("#bx_two");

elt_boxTwo.hide();

elt_boxOne.click(() => {
    elt_boxTwo.show();
});

elt_boxTwo.click(() => {
    console.log("Hello world");
    elt_boxTwo.hide();
});

#bx_one {
    width: 200px;
    height: 50px;
    background-color: red;
    text-align: center;
    font-weight: bold;
}
#bx_two {
    width: 200px;
    height: 50px;
    background-color: orange;
    text-align: center;
    font-weight: bold;
}

<div id="bx_one">Box one</div>
<div id="bx_two">Box two</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

edited Jan 8, 2021 at 13:52

answered Jan 8, 2021 at 13:47

V. Sambor

13.4k6 gold badges51 silver badges68 bronze badges

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

Comments

Mr. Polywhirl · Accepted Answer · 2021-01-08 13:54:07Z

0

Do not create your "box 2" listener inside of your "box 1" listener. Simply separate the two element's click handlers.

const
  $boxOne = $("#bx-one"),
  $boxTwo = $("#bx-two").hide();

$boxOne.on('click', () => $boxTwo.show());

$boxTwo.on('click', () => {
  console.log("Hello world!");
  $boxTwo.hide();
});

.bx {
  width: 200px;
  height: 50px;
  text-align: center;
  font-weight: bold;
}

#bx-one { background-color: red; }
#bx-two { background-color: orange; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bx-one" class="bx">Box one</div>
<div id="bx-two" class="bx">Box two</div>

answered Jan 8, 2021 at 13:54

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Comments

Med Okl · Accepted Answer · 2021-01-08 13:57:57Z

0

yes the code I gave is simple ... But it does not perfectly illustrate my problem. In fact in my original code this is a dialog box that pops up when I click on a button, and this dialog box contains a "confirm" button. I want that when I click on the confirm button (Unlike the display of "hello world" in the console in this code) a confirmation message goes from the dialog box to the object that contains the first button that I clicked. So i told myself that the two click events must be connected. i could be wrong

answered Jan 8, 2021 at 13:57

Med Okl

1041 silver badge8 bronze badges

1 Comment

Heretic Monkey Over a year ago

Please do not use answers for anything other than answers to the question. Stack Overflow is not a forum; it is a strict question and answer site. If you have more information to add to your question, edit your question to include it.

Collectives™ on Stack Overflow

How to fix the recursion problem in jQuery code

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related