Question

I am using JavaScript to generate a map for a game, and each tile is a separate div. In order to be able to position the map on my site, I am throwing them all in another div.

So for example:

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

The #tile divs are generated from data in an XML file, so they’re dynamically generated. On each #tile, I have an onmouseevent that triggers a function (alert(1) for now just to get it to work) but it never seems to be triggered.

If I put an onmouseevent on #mapBox it triggers it, but I can’t get it to work for the #tile divs.

Any help with this would be appreciated.

Answer 1

Not sure how you’re selecting the #tile divs, but it is not valid to have multiple elements with the same ID.

Selection using duplicate IDs will often give you only the first match (or some other unpredictable behavior).

When a duplicate identifier is needed, you should use a class instead of an ID.

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