javascript - How to bind and unbind an event listener once executed -

i'm trying bind , unbind event listener 1 has been clicked…

• user clicks div
• once div clicked… binded event listener
• code executed
• at end of code… div unbinded event listener

$(document).on('click', '.clickable:not(.clicked)', function(event) {  var $this = $(this);    $this.addclass('clicked');      if ($this.hasclass($this.data('add-class'))) {    $this.removeclass($this.data('add-class'));  }  else {    $this.addclass($this.data('add-class'));  }      $this.removeclass('clicked');  });

.clickable {  width: 100px;  height: 100px;  background: #edf0f6;  margin: 10px;  transition: .5s;  float: left;  border: 1px solid transparent;}    .clickable:hover {  border: 1px solid #10cffc;  box-shadow: 0 0px 15px rgba(0, 0, 0, 0.25);}    .click1 {    transform: scale(1.1);  }  .click2 {      -webkit-transform: rotatez(90deg); /* standard syntax */      transform: rotatez(90deg); /* standard syntax */  }    .click3 {    height: 180px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div data-add-class="click1" class="clickable"></div>  <div data-add-class="click2" class="clickable"></div>  <div data-add-class="click3" class="clickable"></div>

add class on clicked element , filter depending it:

$(document).on('click', '.clickable:not(.clicked)', function(event) {   $(this).addclass('clicked');    //code execute @ once each elements in matched set });