Question

我有一个有趣的情况。我有一个附加到元素的多个单击事件。

在事件1之后，我需要删除事件2，但保留事件1.

这就是我所拥有的：

$('.square').on('click', grow);
$('.square').on('click', nameReset);
var nameReset = function () {
    alert(this.className);
}
var grow = function () {
    $(this).toggleClass('grow');
    $(this).off('click');
}

换句话说，我需要保留grow函数，但在事件被触发后删除nameReset。

.square {
    height: 100px;
    width: 100px;
    border: 1px solid;
    display :inline-block;
    transition: all 2s;
}
.grow {
    width: 150px;
    height: 150px;
}
.red { background-color: red; }
.blue { background-color: blue; }

Answer 1

两个选项：

在删除事件时指定该功能（即$(this).off('click', nameReset)）。

Example Here

jQuery .off()

可以通过在handler参数中指定函数名来删除处理程序。当jQuery附加一个事件处理程序时，它会为处理函数赋予一个唯一的id。
```
var nameReset = function () {
    alert(this.className);
}
var grow = function () {
    $(this).toggleClass('grow');
    $(this).off('click', nameReset);
}
$('.square').on('click', grow);
$('.square').on('click', nameReset);
```

或者，您可以namespace the events，（$(this).off('click.square.nameReset')）删除所需的事件：

Example Here

var nameReset = function () {
    alert(this.className);
}
var grow = function () {
    $(this).toggleClass('grow');
    $(this).off('click.square.nameReset');
}

$('.square').on('click.square.grow', grow);
$('.square').on('click.square.nameReset', nameReset);

根据事件有条件地防止事件移除

1 个答案: