0

我有一组要在文档中创建的块。它们充当地图上的交互点。（有一张地图图片作为背景，方块在地图上的房屋正上方）

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

在事件函数中，我将背景图像添加到 span 元素。在悬停或单击房屋时创建效果。这一切都很好......

除了在 IE 中

这些 Jquery 函数在 IE 中不起作用（悬停并单击）还是其他原因？

4

1 回答 1

0

只是为了显示跨度，我display:inline-block在这里给 CSS 提供了高度和宽度。
使用 jQuery创建此<span>元素后，它会附加在 DOM 中的某个位置（此处为示例），因此 在我打包您的所有已给定元素后'body'，悬停和单击可以与浏览器鼠标处理程序交互（不可见元素不会触发 mouseevents，逻辑 ^^）作为 jQuery 的选择器，以帮助其查找机制了解在 DOM 中将 EventListener 绑定到何处
newblock$(newblock)

您不能将eventListeners 直接绑定到document.createElement('span')相当于$('<span />')

只是为了检查我的对象结构，blocks我做了一个小例子。

<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>
于 2013-05-07T06:41:59.517 回答