怎么通过ID取消onclick事件,unbind()的用法和好处

最近在做一个项目web前端遇到一个小问题，记录下来 希望和我遇到同样的问题同学不要在走弯路

问题是这样的 我在某个class上加个onclick事件 由于逻辑关系 在触发某个事件的时候 class的onclick事件不可以触发

开始的思路就是把class去掉 但是发现这样是不可以解决问题的

代码如下：

$("#id").on("click",function(){
    alert(" 触发事件");
    $(".one").removeClass("one");//取消class
});
$(".one").on("click",function(){
    alert("one被执行了");
});

class为one的代码一直就执行。

一开始没有搞名原因， 没有办法 做了个全局变量来控制one的点击事件

代码如下：

var message=true;//做全局变量
$("#id").on("click",function(){
    alert(" 触发事件");
    message=false;//做新的复制
    //$(".one").removeClass("one");//取消class
});
$(".one").on("click",function(){
    if(message){
    alert("one被执行了");
    }    
});

问题是解决 但是为什么removeClass不起作用呢？？？？

这个问题是由于初始化时机造成的 在html加载时引用的js就为html里的元素绑定了事件 及时 你在后期改变元素 那么开始它还是存在的。

问题怎么解决呢？

在jquery里有个unbind()函数

既然有函数啦 那我们就测试下吧

代码如下：

<input id="btn" type="button" value="点击" />

<a id="btn1" href="javascript:void(0)">测试</a>
//定义一个点击事件
function oneClick(){
    alert(this.value)//值：点击
}
$("#btn").on("click",oneClick);//为id=btn的绑定个点击事件


$("#btn1").on("click mouseout", function(event){//为id=btn的绑定个点击事件和离焦事件
    if( event.type == "click" ){
        alert("点击事件");
    }else if( event.type == "mouseout" ){
        $(this).css("color", "red");        
    }
});
$("#btn1").unbind("click");

测试结果

点击按钮可以触发事件(值为点击)  但是点击测试是没有效果的，但是离焦事件变色会变说明离焦事件生效

这样就发现id=btn1的点击事件取消了！！ 目的达到。

希望对大家有帮助！！！！！！！