jquery - 事件发生后在 click 函数上附加另一个处理程序

Question

我的身体中有一个<div>as 按钮，它使用 jQuery 触发一个事件click

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

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

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

function btnHandler() { /* something incredible happens here*/ }

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

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

任何帮助将非常感激。谢谢你！

Answer 1

你会想要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 2

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

$('#pause').one('click', btnHandler);

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

Answer 3

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

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

Answer 4

您可以在函数中取消绑定事件..ie

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