innerHTML and event delegation

I have a containing div that has multiple divs within which is updated every 25ms using innerHTML (for performance reasons). I have tried using event delegation to capture events but nothing I seem to do captures the click event. I think this may be due to the speed that the contents are getting updated. Any ideas would be very welcome.

My code:

$(document).ready(function () {
    var canvas = $('#gCanvas')[0];

    $(document.body).delegate('a', 'click', function (e) {
        console.log(e.target);
    });

    var sprites = [];
    for (var i = 0; i < 100; i++) {
        sprites[i] = {x: i+10, y: i+10};
    }


    var doIt = function () {
        var s = '';

        for(var i = 0; i < sprites.length; i++) {
    开发者_运维百科        var spr = sprites[i];
            spr.x++;
            spr.y++;

            s+= '<a id="s'+i+'" class="s" style="left:'+sprites[i].x+';top:'+sprites[i].y+'"></a>';
        }

        canvas.innerHTML = s;
    };
    //doIt();
    setInterval(doIt, 50);
});

it easy if you use jquery. there is a .live function, but i am not sure if it quick enough. alternatively you could try to check jquery source to find the .live() code and find the solution

UPDATE

if you are trying to make a game then you can try to use svg for good browsers and vml for bad ones.