How to remove on() event using jQuery’s off()

In this article, we will explain how to set up a jQuery click event using “$().on(‘click’, ～)” and remove it when it is no longer needed using “$().off()”.
This is a basic measure to prevent unintended event stacking every time a button is clicked.
Understanding this will help you create more stable and interactive web pages.

Using jQuery’s off() to Remove on() Events – CSS Code

First, let’s apply some design to the button (.tagutuika) for testing purposes.
The following CSS code is used to style the click button. Modify it as needed.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
.tagutuika{
  padding: 4px;
  width: 400px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #cccccc;
}
.addclk{
  padding: 4px;
  width: 450px;
  margin: 0 auto 16px auto;
  cursor: pointer;
  background-color: #4DA6FF;
}
</style>

• .tagutuika: Styles for the click button. It has a gray background and is centered.
• .addclk: The button for adding a click area, styled with a blue background.

Using jQuery’s off() to Remove on() Events – HTML Code

Next, here is the HTML code. This code sets it so that clicking the “.tagutuika” button adds a new element inside “.addarea”.

<h1>Click the gray area below to add a new tag element with an on('click'~ event below it.</h1>

<div class="tagutuika">Click here to add a click area below.</div>

<div class="addarea"></div>

• class=”tagutuika”: A button that, when clicked, adds elements.
• class=”addarea”: The area where elements added by the click event will be inserted.

Removing on() Click Events Using off() – JavaScript Code

Next is the JavaScript code.
First, the jquery-2.2.0.min.js file is loaded.
Each time “.tagutuika” is clicked, off() is used to remove any existing click events before reattaching a new one, preventing event stacking.

<script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(".tagutuika").click(function(){

    $(".addarea").html('<div class="addclk">Clicking this added area will display an alert message.</div>');

    $('body').off();  // Remove previous click events using off()

    $("body").on('click', '.addclk', function(){
      alert("The added area was clicked!");
    });

  });
</script>

• .tagutuika: Clicking this element will display an additional area.
• .addarea: The area where elements added by the click event will be placed.
• off(): Removes all click events once to prevent event stacking.

By using “off()”, we can prevent unnecessary events from being added even if the “.tagutuika” button is clicked multiple times.
For example, without off(), multiple clicks could cause the alert to display multiple times unnecessarily.

Demo Page: Using jQuery’s off() to Remove on() Events

To see how this functionality works, check out the demo page below.
Interacting with the example will help deepen your understanding.

Demo Page: Using jQuery’s off() to Remove on() Events

Conclusion

By utilizing jQuery’s “off()”, you can prevent duplicate event triggers.

　
※ If you reuse this code, please do so at your own risk.
　Do not reuse the Google Analytics tag in the head section of the demo page.