Question

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

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

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

除了IE

这些Jquery函数在IE中是不起作用的（悬停和点击）还是其他的？

Answer 1

为了显示跨度，我在这里给出了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>

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

1 个答案: