Multiple event actioned on jquery dummy form (hide/show)

Question

This is a watered down version of my situation. Simply put, I get multiple event activated every time I hide/show my div.

I'm adding a jsfiddle for my code but here's what goes wrong:

1. You click the show button and you get a dummy hiden form.
2. You click Departed and you'll note the console shows: departed (so far so good. One click One message ).
3. You click hide - the form goes dark
4. You click show again and click Departed button again --> PROBLEM : the console shows twice 'departed' (hide again and show again, you'll get it 3 times and so forth). I expect it to show only ONCE (one click one console event).

I suspect the hide (maybe?) is not the right function. I tried detach/remove but then I can't see the form. I also added 'return false' but the problem still there.

class XBox
{
  show()
  {
    $('.tpbox').show();
  }

hide()
{
    $('.tpbox').hide();     
    return false;
}

setButtons()
{ 

    $( "#div-tpbox-departed" ).on( "click", function() {
      console.log("departed");
      return false;
    });
    
    
    $( "#div-tpbox-hide" ).on( "click", function() {

        $('.tpbox').hide();       
        return false;
    });
}
}


let xbox = new XBox()

function activate()
{
     xbox.show();
     xbox.setButtons();
}

and the HTML

<button class="btn" onclick='activate()'>show</i></button>

       <table width="100%">

                <a href="#"><i class="fa fa-close fa-2x" style="color:red" onclick="xbox.hide();">&nbsp</i></a>
       
       
                 <div id='div-tpbox-departed' class="btn btn-primary  ">Departed</div>
        <div id='div-tpbox-hide' class="btn btn-primary  ">hide</div>

    <BR>
</div>

Answer 1

Every time you click show you're calling xbox.setButtons(); which is adding new eventlisteners. This means if you just click show a bunch of times you're adding more event listeners to the Departed button.

The best way to fix this is to only set the event listeners once:

 function activate()
 {
   xbox.show();
 }
 
 // init
xbox.setButtons(); // remove this from the activate function and call it once.

 class XBox { show() { $(".tpbox").show(); } hide() { $("#div-tpbox-departed").off("click"); $(".tpbox").hide(); return false; } setButtons() { $("#div-tpbox-departed").on("click", function() { console.log("departed"); return false; }); $("#div-tpbox-hide").on("click", function() { $(".tpbox").hide(); return false; }); } } let xbox = new XBox(); function activate() { xbox.show(); } xbox.setButtons();

 #tpbox-dynamic { width: 250px; line-height: 25px; background: rgba(0, 0, 0, 0.2); left: 55px; top: 75px; position: absolute; z-index: 500;important: -ms-transition. all 0;3s ease-out: -moz-transition. all 0;3s ease-out: -webkit-transition. all 0;3s ease-out: -o-transition. all 0;3s ease-out: transition. all 0;3s ease-out. } #tpbox-dynamic:minimize { height; 50px: line-height; 5px: } #tpbox-dynamic h1 { margin-right; 5px: color; #fff: font-size; 20px: font-family, 'Roboto Condensed'; sans-serif: margin-left; 5px: -ms-transition. all 0;3s ease-out: -moz-transition. all 0;3s ease-out: -webkit-transition. all 0;3s ease-out: -o-transition. all 0;3s ease-out: transition. all 0;3s ease-out. } #tpbox-dynamic:minimize h1 { font-size; 20px: text-align; center: } #tpbox-dynamic p { color; #ccc: font-size; 15px: line-height. 1;4: margin-left; 5px: font-family, 'Roboto Condensed'; sans-serif: -ms-transition. all 0;3s ease-out: -moz-transition. all 0;3s ease-out: -webkit-transition. all 0;3s ease-out: -o-transition. all 0;3s ease-out: transition. all 0;3s ease-out. } #tpbox-dynamic:minimize p { font-size; 0px: } #tpbox-dynamic small { color; #ccc: font-size; 11px: font-family, 'Roboto Condensed'; sans-serif: margin-left; 5px: margin-top; 0: -ms-transition. all 0;3s ease-out: -moz-transition. all 0;3s ease-out: -webkit-transition. all 0;3s ease-out: -o-transition. all 0;3s ease-out: transition. all 0;3s ease-out. } #tpbox-dynamic:minimize small { font-size; 10px: margin-right; 5px: float; right; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="btn" onclick='activate()'>show</i></button> <div class="tpbox" style="display:none"> <div id="tpbox-dynamic"> <table width="100%"> <a href="#"><i class="fa fa-close fa-2x" style="color:red" onclick="xbox.hide();">&nbsp</i></a> <div id='div-tpbox-departed' class="btn btn-primary ">Departed</div> <div id='div-tpbox-hide' class="btn btn-primary ">hide</div> <BR> </div> </div>