Unresponsive OnMouseOver event in a dynamically-generated nested DIV

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.

user113716 · Accepted Answer · 2010-11-27 01:37:07Z

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>

answered Nov 27, 2010 at 1:37

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

TheJF Over a year ago

Class is already used for something else, but thanks. This still doesn't solve the issue however. :/

user113716 Over a year ago

@TheJF - You can have more than one class per element. Just use a single white space to separate them. <div class="someClass tile" ... ></div> How are you selecting the elements in order to assign the handler?

TheJF Over a year ago

Oh, I knew about the id but tested it out anyhow. But I didn't know you could assign more than one class to an element, thanks!

TheJF Over a year ago

The handler is assigned inline, as in <div class="grass tile" ... onmouseover="alert(1);"></div>

user113716 Over a year ago

@TheJF - If the handler is assigned inline, not sure why it wouldn't fire. As @Gaby indicated, you can use event delegation for this. No need to use jQuery for it. Give me a minute and I'll put together a couple of examples.

|

Gabriele Petrioli · Accepted Answer · 2010-11-27 02:31:12Z

First problem, as mentioned, is that you use the same id for many elements, so the event only fires on the first one.

Secondly you should use the .delegate() method on the #mapBox after giving a class on the tiles like this

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

example at http://jsfiddle.net/nXa27/1/

Update

Sorry, didn't see you were not talking about jquery..

Here is an example with pure javascript http://www.jsfiddle.net/AvJf7/

Still you will need to add a tile class to your tiles for easy and valid selecting.

Ahh, thank you, but this is using jQuery right? I haven't taken the time to learn that yet. Is there any solution that doesn't use jQuery, or should I just stop everything and go learn it before continuing my project?
@theJF, oups. Thought you were asking about jquery. Added an pure JS example. jQuery is pretty handy if you need it.. Have a read and see if it fits your needs ;)
Ahh, thank you for you help! patrick dw's answer did the trick, although I need to use it a bit differently than I was hoping, but I really appreciate the answers. :)

Collectives™ on Stack Overflow

Unresponsive OnMouseOver event in a dynamically-generated nested DIV

2 Answers 2

9 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Related