我在使用 .bind()
和 .unbind()
功能时遇到问题。单击按钮时,应该会更改框的颜色。在此期间,通过解除绑定(bind)点击功能来禁用该按钮。但是,当 css 转换完成时,我在重新绑定(bind)单击时遇到问题。
到目前为止我所拥有的是:
$('button').on('click', function(){
$('button').unbind('click');
$('.box').toggleClass('color');
$('.box').one('webkitTransitionEnd transitionend', function(e){
console.log('transition ended')
$('button').bind('click')
});
});
最佳答案
绑定(bind)时需要传递点击处理程序。因此,创建一个函数引用,然后在绑定(bind)处理程序时使用它。
function click() {
$('button').off('click.transition');
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').on('click.transition', click)
});
$('button').on('click.transition', click);
演示:Fiddle
另外看看 namespaces 的用法在注册/删除处理程序时,因为如果有其他点击处理程序添加到按钮,我们不想打扰它
也不要在另一个事件处理程序中添加事件处理程序
<小时/>另请查看.one()
function click() {
$('.box').toggleClass('color');
}
$('.box').on('webkitTransitionEnd transitionend', function (e) {
console.log('transition ended')
$('button').one('click.transition', click)
});
$('button').one('click.transition', click);
演示:Fiddle
关于javascript - 取消绑定(bind)并重新绑定(bind)点击css过渡结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20875361/