前言

最近在做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("執行"); 
})；

當然，肯定還有其他更好的方法可以解決上面的問題。