最近在做一个项目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的点击事件取消了!! 目的达到。
希望对大家有帮助!!!!!!!