今天在对一个统计页面进行改版，修改完后，发现统计图上的circle点的hover事件失效了。我用的画图插件是jQuery的chart.js，比较老的版本了。于是我开始检查chart.js源码，定位到出问题的地方。出问题的代码是这样写的：

$('#'+container_id).delegate('circle','hover',function(e){
    if (e.type === 'mouseenter') {
        var index = $(this).data('index');
        var circles = d3.selectAll('#'+container_id+' .data-point-'+index);
        circles.attr('r',4);
        var html = '';
        circles.each(function(){
            var _index = $(this).parent().attr('id').split('_').pop();
            var label = _config.line_labels[parseInt(_index)];
            var value = d3.select(this).data()[0][1];
            html += '<li style="background-color:'+color(_index)+';">'+label+':'+value+'</li>';
        });
        $('#'+container_id+' .line-chart-tip').html(html).show();
        $('#'+container_id+' .line-chart-tip').css('left',(w - $('#'+container_id+' .line-chart-tip').width()) / 2 + 'px');
        return false;
    }else{
        var index = $(this).data('index');
        var circles = d3.selectAll('#'+container_id+' .data-point-'+index);
        circles.attr('r',3);
        $('#'+container_id+' .line-chart-tip').hide();
    }
});

问题就出现在$(‘#’+container_id).delegate(‘circle’,’hover’,function(e){})这里，新版的页面使用的jQuery版本比较新，是1.10.2的。这个版本的jQuery已经没有hover这种事件了，需要将hover替换成mouseover，替换后就有反映了。但是单单这样修改是不够的，修改完整的代码如下：

$('#'+container_id).delegate('circle','mouseover',function(e){
    var index = $(this).data('index');
    var circles = d3.selectAll('#'+container_id+' .data-point-'+index);
    circles.attr('r',4);
    var html = ''; 
    circles.each(function(){
        var _index = $(this).parent().attr('id').split('_').pop();
        var label = _config.line_labels[parseInt(_index)];
        var value = d3.select(this).data()[0][1];
        html += '<li style="background-color:'+color(_index)+';">'+label+':'+value+'</li>';
    }); 
    $('#'+container_id+' .line-chart-tip').html(html).show();
    $('#'+container_id+' .line-chart-tip').css('left',(w - $('#'+container_id+' .line-chart-tip').width()) / 2 + 'px');
    return false;
}); 
$('#'+container_id).delegate('circle','mouseout',function(e){
    var index = $(this).data('index');
    var circles = d3.selectAll('#'+container_id+' .data-point-'+index);
    circles.attr('r',3);
    $('#'+container_id+' .line-chart-tip').hide();
});