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中的静态元素，因此您可以直接按类选择器选择元素而不是通过文档点击事件后的委派获得：

$('.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 
});

一旦通过委托应用了事件，就无法对孩子进行特定的解除绑定，在这种情况下，您可以使用@ A.Wolff的解决方案。

Answer 2

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

Answer 3

您可以使用解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

在点击的元素上添加一个类并根据它进行过滤：

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

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

4 个答案: