执行后如何绑定和取消绑定事件侦听器

Question

我正在尝试将事件侦听器绑定和取消绑定到仅被单击的事件侦听器......

用户点击次数Div
一旦 div 被点击……它就会被绑定到一个事件侦听器
代码已执行
在代码的末尾...... div 然后从事件侦听器中解除绑定

$(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>

Answer 1

使用jquery off解除绑定事件如下，你不需要在这里使用事件委托因为这些是html中的静态元素所以你可以select 元素由 class select 直接获取，而不是在文档单击事件后通过委托获取：

$('.clickable').on('click', function(event) {
    var $this = $(this);

    if ($this.hasClass($this.data('add-class'))) {
      $this.removeClass($this.data('add-class'));
    }
    else {
      $this.addClass($this.data('add-class'));
    } 

    $this.off('click'); // unbind me from next click 
});

一旦通过委托应用了事件，那么children的具体解除绑定是不可能的，在这种情况下，您可以使用@A.Wolff的解决方案。

Answer 2

给你一个解决方案

$(document).on('click', '.clickable', function(event) {
  var $this = $(this);
  $('.clickable').removeClass('add-class');
  $this.addClass('add-class');
  $this.off('click');
});

.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>

Answer 3

在单击的元素上添加 class 并根据它进行过滤：

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

Answer 4

如果您已经在使用 jQuery，为什么不使用 .one() 方法？ http://api.jquery.com/one/

执行后如何绑定和取消绑定事件侦听器

How to bind and unbind an event listener once executed

javascript

jquery