Question

I’ve been trying to bind events to jquery objects (code below) but its really not working at all. Could somebody offer me a suggestion? Thanks!

var img = thumbnail[0].appendChild(document.createElement('img'));
img.className = 'smallboard';
img.src = 'res/smallboard' + i + '.jpg';
img.onload = function() {console.log('small board loaded.');}
img.style.top = (8-i)*height+5 + 'px';
img.style.left = 4 + 'px';
var jqimg = $(img);
jqimg.bind('click', function(){
    console.log(i + '');
    show_board(i-1, true);
});

Here, thumbnail is a jquery element and i is a small whole number. I had problems with binding it in another way as well. (code below)

highlight = $('<div id="level_highlight"></div>');
highlight.css('height', height + 'px');
highlight.css('width', width + 'px');
highlight.css('display', 'inline');
highlight.css('left', posx + 'px');
highlight.css('top', posy + 'px');
highlight.bind('mouseover', function() {console.log('mousing over highlight');});

Its not working here either. I feel I am making a silly error somewhere. I’m using Chrome.

Thank you!

Answer 1

Thanks guys. The answer was that since this code is an over-simplification of the code-base, I’d missed out a part where the z-index for the container element for this section was set to -10. Set that part correct and it worked like a charm.

Thanks.