动态生成的嵌套DIV中无响应的OnMouseOver事件

Question

我使用JavaScript为游戏生成地图，每个图块都是单独的div。为了能够在我的网站上定位地图，我将它们全部扔在另一个div中。

所以例如，
<div id="mapBox">
<div id="tile" ... ></div>
<div id="tile" ... ></div>
</div>

#tile div是根据XML文件中的数据生成的，因此它们是动态生成的。在每个#tile上，我有一个onmouseevent触发一个函数（alert（1）现在只是让它工作）但它似乎永远不会被触发。

如果我在#mapBox上放了一个onmouseevent它会触发它，但我不能让它为#tile div工作。

对此有任何帮助将不胜感激，谢谢！

Answer 1

不确定如何选择#tile div，但是多个元素具有相同ID无效。

使用重复ID进行选择通常只会为您提供第一个匹配（或其他一些不可预测的行为）。

当需要重复的标识符时，您应该使用类而不是ID。

<div id="mapBox">
    <div class="tile" ... ></div>
    <div class="tile" ... ></div>
</div>

Answer 2

如上所述，第一个问题是您对许多元素使用相同的id，因此事件仅在第一个元素上触发。

其次，您应该在像这样的瓷砖上课后使用#mapBox上的.delegate()方法

$('#mapBox').delegate('.tile', 'mouseover', function(e){
    //do whatever here
})

示例http://jsfiddle.net/nXa27/1/

---

<强>更新

抱歉，没看到你不是在谈论jquery ..

以下是纯javascript http://www.jsfiddle.net/AvJf7/

的示例

您仍然需要在贴图中添加tile类，以便轻松有效地进行选择。