这个问题是在做一个聊天界面时出现的
想要的效果是点击左侧的头像时,获取其对应的id,之后在对话框中点击发送按钮时发送消息,并获取头像的id,这个时候发现,当点击发送绑定的click时,变量就会显示出所有点过的所有id。
最开始我想要解除事件冒泡,后来发现不是这个问题
分析后发现每次点击外部的click事件后,内部的click事件都会绑定一次,因此会遍历很多次
解决方案是每次点击后使用unbind()解除里面的click事件,然后在绑定。
//外层click事件
$(".talkPeople").children(".t_people").click(function(){
alert("outer");
//先解除绑定
$("#messBtn").unbind('click');
//再绑定内部click事件
$("#messBtn").click(function(){
//$("#messBtn").unbind('click').click(function(){
alert("inner");
};
};
如果内部的click事件只需要执行一次,可以在绑定的事件中解绑,或者使用one()来绑定事件
one()方法
具体参照 http://www.w3school.com.cn/jquery/event_one.asp
定义和用法
one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
语法
$(selector).one(event,data,function)
//外层click事件
$(".talkPeople").children(".t_people").click(function(){
alert("outer");
//one()绑定click事件
$("#messBtn").one("click",(function(){
alert("inner");
};
};
或者
//外层click事件
$(".talkPeople").children(".t_people").click(function(){
alert("outer");
//绑定内部click事件
$("#messBtn").click(function(){
alert("inner");
//解除绑定
$("#messBtn").unbind('click');
};
};