innerHTML and event delegation

Question

Hello,

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);

});

Thanks

Mark

Answer 1

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.