confirm dialog box triggers multiple time

Question

I have the following code for a menu that allows users to chose from one of the given options and redirect them to the related content for that option. There is also a back button that is supposed to return the users to the menu but it first needs the user to confirm the action.

Now there is an issue that after confirming to return to the menu if you chose to select another option and then return to the menu it will ask you two times for confirmation. How can I fix this?

Also, How can I write the case statement block better in a way that I don't have to write the back button function for each case?

$(document).ready(function() {
  $(".option1, .option2, .option3, .option4").hide();
  $(".btn").on("click", function() {
    $('.menu').hide();
    var idName = $(this).attr('id');
    switch (idName) {
      case "option1":
        $('.option1').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option1').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option2":
        $('.option2').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option2').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option3":
        $('.option3').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option3').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option4":
        $('.option4').show();
        $(".back_btn").on("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option4').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
    };
  });
});

ul {
  list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
    <li class="btn" id="option1">
      <button>Option 1</button>
    </li>
    <li class="btn" id="option2">
      <button>Option 2</button>
    </li>
    <li class="btn" id="option3">
      <button>Option 3</button>
    </li>
    <li class="btn" id="option4">
      <button>Option 4</button>
    </li>
  </ul>
</div>

<div class="option1">Content 1
  <button class="back_btn">back</button>
</div>
<div class="option2">Content 2
  <button class="back_btn">back</button>
</div>
<div class="option3">Content 3
  <button class="back_btn">back</button>
</div>
<div class="option4">Content 4
  <button class="back_btn">back</button>
</div>

Answer 1

Instead of having the various switch statements, you could just create two click() events, one for all options and another one for the back button, like this:

$(document).ready(function () {
    $(".option1, .option2, .option3, .option4").hide();
    $(".btn").on("click", function () {
        $('.menu').hide();
        var idName = $(this).attr('id');
        $('.' + idName).show();
    });
    $(".back_btn").on("click", function () {
        if (confirm("Are you sure you want to go back to the menu?")) {
            $("div[class^='option']").hide();
            $('.menu').show();
        }
    });
});

ul {
    list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <ul>
        <li class="btn" id="option1">
            <button>Option 1</button>
        </li>
        <li class="btn" id="option2">
            <button>Option 2</button>
        </li>
        <li class="btn" id="option3">
            <button>Option 3</button>
        </li>
        <li class="btn" id="option4">
            <button>Option 4</button>
        </li>
    </ul>
</div>
<div class="option1">Content 1
    <button class="back_btn">back</button>
</div>
<div class="option2">Content 2
    <button class="back_btn">back</button>
</div>
<div class="option3">Content 3
    <button class="back_btn">back</button>
</div>
<div class="option4">Content 4
    <button class="back_btn">back</button>
</div>

In addition, you could just hide all div elements with a class starting with option using the selector $("div[class^='option']").hide(); (just added for the back button as alternative).

Answer 2

Each time $(".btn") is clicked you are creating another listener on the $(".back_btn") selector.

You can use .one which will remove the listener after the back button has been clicked once.

$(".back_btn").one("click", function()...

$(document).ready(function() {
  $(".option1, .option2, .option3, .option4").hide();
  $(".btn").on("click", function() {
    $('.menu').hide();
    var idName = $(this).attr('id');
    switch (idName) {
      case "option1":
        $('.option1').show();
        $(".back_btn1").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option1').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option2":
        $('.option2').show();
        $(".back_btn2").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option2').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option3":
        $('.option3').show();
        $(".back_btn3").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option3').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
      case "option4":
        $('.option4').show();
        $(".back_btn4").one("click", function() {
          if (confirm("Are you sure you want to go back to the menu?")) {
            $('.option4').hide();
            $('.menu').show();
          } else {
            //Do nothing
          }
        });
        break;
    };
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul>
<li class="btn" id="option1">
  <button>Option 1</button>
</li>
<li class="btn" id="option2">
  <button>Option 2</button>
</li>
<li class="btn" id="option3">
  <button>Option 3</button>
</li>
<li class="btn" id="option4">
  <button>Option 4</button>
</li>
  </ul>
</div>

<div class="option1">Content 1
  <button class="back_btn1">back</button>
</div>
<div class="option2">Content 2
  <button class="back_btn2">back</button>
</div>
<div class="option3">Content 3
  <button class="back_btn3">back</button>
</div>
<div class="option4">Content 4
  <button class="back_btn4">back</button>
</div>