当前位置:网站首页 / 建站知识 / 网站制作知识

网站页面中JQuery移除事件处理程序

发布时间:2017-04-10 23:42点击次数:

有时候,我们需要停用以前注册的事件处理程序。可能是因为页面的状态发生了变化,导致相应的操作不再有必要。处理这种情形的一种典型做法,就是在事件处理程序中使用条件语句。但是,如果能够完全移除处理程序绑定显然更有效率。

假设我们希望折叠样式转化器在页面没有使用正常样式的情况下保持扩展状态,即NarrowColumn或Large Print按钮被选中时,单击样式转换器的背景区域不应该引发任何操作。为此,可以在单击非默认样式转换按钮时,调用.unbind()方法移除折叠处理程序,代码如下所示:

$(document).ready(function(){

$("#switcher").click(function(event){

if(!$(event.target).is('button')){

$("#switcherbutton").toggleClass('hidden');

}

});

$("#switcher-narrow,#switcher=large").click(function(){

$("#switcher").unbind('click');

});

});

现在,如果单击NarrowColumn按钮,样式转换器(<div>)上的单击处理程序就会被移除。然后,再单击背景区域将不会导致它折叠起来。但是,按钮本身的作用失效了!由于为使用事件委托而重写了按钮处理程序,因此按钮本身也带有样式转化器(<div>)的单击事件处理程序。换句话说,在调用$("#switcher").unbind('click')时,会导致按钮上绑定的两个事件处理程序被移除。