在事件后的click函数上附加另一个处理程序

Question

我有一个<div>按钮在我的身体，触发一个事件与jQuery的click

<div id="pause"><img id="pausebtn" src="pause.png" /></div>

并将事件处理程序绑定到此按钮

$('#pause').bind('click', btnHandler);
function btnHandler() { /* something incredible happens here*/ }

我想做的是，在#pause的第一个click之后，处理程序更改为另一个函数，让我们说到

$('#pause').bind('click', btnHandler2);

如有任何帮助，我将不胜感激。谢谢你！

Answer 1

使用.one()来注册一个只运行一次的事件处理程序

$('#pause').one('click', btnHandler);
function btnHandler() {
     $(this).on('click',btnHandler2);
}

Answer 2

您将需要unbind事件处理程序和bind一个新的。

关于bind()和unbind()方法的说明:从jQuery 1.7开始，.on()方法是将事件处理程序附加到文档的首选方法。

function btnHandler() {
  // unbind old event - supply the handler here so nothing else gets unbound
  $('#pause').off('click',btnHandler);
  // rebind new event
  $('#pause').on('click',btnHandler2);
}
$('#pause').on('click',btnHandler);

.bind()和.on()之间的区别在于使用.on()方法创建委托事件的能力。一个委托事件被绑定到你的"目标"父节点，当事件被绑定时，父节点必须存在。通过提供后代选择器，您可以为父元素中包含的所有元素触发此事件，并匹配给定的选择器

的例子:

// this will be triggered for any element with class 'bla' 
// inside the body tag, no matter when said element was added.
$('body').on('click','.bla',console.log);

Answer 3

您可以在第一个事件处理程序中执行此操作:

function btnHandler(event) {
    $(this).unbind();
    $(this).bind('click', btnHandler2);
}

Answer 4

您可以在函数中取消绑定事件，即

function btnHandler(event){
    //your code
    $(this).unbind(event);
    $('#pause').bind('click', btnHandler2);
}