今天遇到一个累加绑定事件的bug 触发一次事件，事件执行多次

今天遇到了一个bug 使用jquery的on()方法为元素绑定了点击事件，点击时会发送请求，让后台取消订单，并记录取消的原因。 

首先我们知道jquery的on()方法是封装了原生JavaScript的addEventListener()方法，这个方法的特点是可以执行多个事件函数，我就在想是不是触发一次事件，事件执行了多个执行函数。

后来看了代码的逻辑发现是，每次点击取消订单，就会绑定一次事件，所以一次比一次多绑定一次事件，就出现了这个问题。

部分代码片段，不完整。

$(".canlorder").on('click', function() {
	var id = $(this).attr('canlid');
	var url = $(this).attr('canlurl');
	
	var yjstatus = $(this).attr("yjstatus");

	if(yjstatus == 1) {
		$(".urog-yj-box").css("display", "block");
		$(".urog-yj-text").html("提示");
		$(".urog-yj-margin").html("是否取消订单？");
		$(".urog-yj-cotent").addClass("cancel-option");
		$(".yj-yes").on("click", function() {
			$(".option-list input:radio").each(function(e,i) {
				if(this.checked) {
					alert('选中'+$(this).attr("ID"));
					return false;
				}
		});		

解决方案

解决方案有两种。

方法一：使用jQuery的one()方法。 
该方法为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。但是这个方案不符合业务逻辑。

方法二：配合off()方法解除绑定。 
该方法为元素绑定一个的事件处理函数，再次给改元素添加相同事件时不会累加绑定。 
 

$(".canlorder").on('click', function() {
	var id = $(this).attr('canlid');
	var url = $(this).attr('canlurl');
	
	var yjstatus = $(this).attr("yjstatus");

	if(yjstatus == 1) {
		$(".urog-yj-box").css("display", "block");
		$(".urog-yj-text").html("提示");
		$(".urog-yj-margin").html("是否取消订单？");
		$(".urog-yj-cotent").addClass("cancel-option");
		$(".yj-yes").off('click').on("click", function() {
			$(".option-list input:radio").each(function(e,i) {
				if(this.checked) {
					alert('选中'+$(this).attr("ID"));
					return false;
				}
		});		

这样就可以了，每次都只执行一次，减少了无畏的发送请求，减轻了服务器的压力。