前言
最近在做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("执行");
});
当然,肯定还有其他更好的方法可以解决上面的问题。