jQuery delegate 的hover无效的原因

今天在对一个统计页面进行改版,修改完后,发现统计图上的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();
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注