click事件累加绑定问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28165595/article/details/84036087

前言

最近在做echarts图表的钻取功能，其中出现一个问题。在点击echart图表的柱形图中，能够钻取该柱形图对应的下一级别图表。要实现上面的钻取功能就需要给echarst上绑定click事件，以便在点击的时候触发相应的事件。但是开发中出现，点击一次柱形图，但是触发了两次click事件。

具体代码

下面简单列出代码

	function getDataByAjax(){
		$.ajax({
		   	 url:"rkxx/_search",
			 data:{},
			 type:"post",
			 contentType:'application/json',
	                 success: function (data) {
		            //此处省略其他代码
                            //。。。。。
                            
		    	 BarChart = echarts.init(document.getElementById('imgDiv'),
                        'macarons');
		    	 BarChart.setOption(BarChartOption);
		    	 BarChart.on('click', function(param) {
			    	 getDataByAjax();
		    	 });
                            //省略其他代码
	    	        },error:function() {
				alert("统计结果失败！");
			}
	    });
	}

上面的代码只是简单模拟场景，没有实际意义，可以看到实际上上面的代码类似嵌套调用了。导致了imgDiv上被绑定多个click事件，也就是会出现前面提到的问题了。

解决方案

1.使用jquery的one()方法，为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。

  BarChart.one('click', function(param) {
	 getDataByAjax();
  });

2.每次绑定点击事件前先解除之前的事件绑定，再为元素绑定事件，类似于先清空，在做操作一样。但你使用bind()方法绑定时，可以用unbind()方法解除绑定。通常我们跟愿意用on()方法绑定事件，因为bind()方法已经不被推荐，那么那么就用off()方法解除事件绑定。(这上面的方法在echarts中绑定可能不太行，但是对于平时其他的绑定事件，可以使用)

$("#imgDiv").unbind("click").bind("click",function(){
    alert("执行"); 
});
$("#imgDiv").off("click").on("click",function(){
    alert("执行"); 
})；

当然，肯定还有其他更好的方法可以解决上面的问题。