Issue using jQuery.on and SVG element

HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div id="container"></div>
<div id="status">Hover over shapes</div>
<div id="html-container"></div>

CSS

#html-container { position: absolute; left: 15px; width: 100px; height: 100px; background: red; }

JavaScript

$(function () {

    var circle = Raphael("container", 700, 100).circle(50, 50, 40);
    $(circle.node).attr({ fill: 'red', id: 'shape'});

    $('#shape').on('mouseenter', function() {
        $('#status').text('svg mouse enter');
    });    

    $('#shape').on('mouseleave', function() {
        $('#status').text('svg mouse leave');
    });    

    $('#shape').on('click', function() {
        $('#status').text('svg click!');
    });

    $('#html-container').on('mouseenter', function() {
        $('#status').text('html mouse enter');
    });    

    $('#html-container').on('mouseleave', function() {
        $('#status').text('html mouse leave');
    });    

    $('#html-container').on('click', function() {
        $('#status').text('html click!');
    });

});