click事件嵌套click事件多次触发的解决方法

这个问题是在做一个聊天界面时出现的

想要的效果是点击左侧的头像时，获取其对应的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');
	};
};