Jquery Hover和IE中的Click无法正常工作

时间:2013-05-07 06:08:18

标签: javascript jquery css

我有一个将在文档中创建的块数组。它们充当地图上的交互点。 (地图图像作为背景,块直接位于地图上的房屋上方)

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

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

除了IE

这些Jquery函数在IE中是不起作用的(悬停和点击)还是其他的?

1 个答案:

答案 0 :(得分:0)

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

你不能将eventListeners直接绑定到document.createElement('span'),这相当于$('<span />'),你总是需要把它放在你的DOM中的某个地方,换句话说,你不能将监听器绑定到javascript本身(变量),但是对于dom中的对象

只是为了查看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>