Question

I created a little Find the Differences games.
It includes an image of two identical images. The image is the background on a div with set height and width. This div is position relatively.

On it, I positioned invisible divs on each of the differences, absolutly.

All is working, but now I need to know when someone clicks on the container div and not directly on one of the changes divs.

Sounds easy, I planned to create and event for clicking the background image (relative div), and stop propagation and default when clicking on real difference area.

But for some reason, even if I click on a real difference, the event starts from the background image. than, if the click was on a real difference, it propagates to the difference div.

I tried to play with the z-index, tried switching the diffrences from divs to A tags, but nothing changed that…

This is the code for a question, differences divs are inside the main div (game).

<div id="q1" class="game center relative_container" style="display: block;">
    <div id="q1_p1" mirror="q1_1" class="pointer"></div>
    <div id="q1_p1_o" mirror="q1_1" class="pointer"></div>        
    <div id="q1_p2" mirror="q1_2" class="pointer"></div>
    <div id="q1_p2_o" mirror="q1_2" class="pointer"></div>        
    <div id="q1_p3" mirror="q1_3" class="pointer"></div>
    <div id="q1_p3_o" mirror="q1_3" class="pointer"></div>        
</div>

I would be glad to hear any idea.

It works for me if I add an inlinde onclick event to the divs, but I rather not use that…

Thanks for your time and effort 🙂

Answer 1

OK, so when I changed (by bfavaretto clue) from .live to .on, suddenly the order of events was OK again. Maybe it has somthing to do with live looking for new elements bounded to the event, maybe someone else can explain but that fixed that…
Thanks!