Jquery Hover and Click in IE not working

Question

I have an array of blocks that are going to be created in a document. They serve as interaction points on a map. (Theres a map image as the background and the blocks are directly above houses on the map)

for(blocks.length)
   var newblock = $("<span data-unit='" + blocks[i].unitnum + "' class='unitwrap' />");
   ....
   newblock.click(function() {...});
   newblock.hover(function() {
      ....
   }, function () {
      ....
   });
}

In the event functions I add a background image to the span elements. Creating an effect when hovering over, or clicking on a house. This all works great...

Except in IE

Do these Jquery functions not work in IE (hover and click) or is it something else?

Answer 1

Just to show the span, i give CSS display:inline-block here with height and width.
After creating this <span> element with jQuery it is append somewhere in the DOM (here as example on 'body' ) so hover and click can interact with the browsers mousehandler (not visible elements do not fire mouseevents, logical ^^ ),
after i pack your allready given newblock element as selector to jQuery $(newblock) to help its lookup mechanism to know where to bind the EventListener to in the DOM

you cant bind eventListeners direct to document.createElement('span') which is equivalent to $('<span />') , you allways need to put it somewhere in your DOM for, in other words, you cant bind listeners to javascript itsself (variables), but to objects in the dom

And just to check out the object structure of blocks i made tiny example of it.

<style>
  .unitwrap {height:40px; width:40px; display:inline-block; border: 1px solid #f00}
</style>
<script type="text/javascript">
   var blocks=[{"unitnum":2},{"unitnum":4}];
   var l=blocks.length;
   for (var i=0;i<l;i++) {
       var newblock = $("<span data-unit='" + blocks[i].unitnum + "' class='unitwrap' />");
       $('body').append(newblock);
       $(newblock).click(function(){
         console.log('yeah clicked');
       });
       $(newblock).hover(function(){
         console.log('plop hovered');
       });
   }
</script>