onclick event on div not firing

Question

I have an image+text slider with recent blogposts which loop through the recent posts whilst a vistor keeps looking at a certain page.

You can see all the code on http://jsfiddle.net/GsgPM/16/ It is about the big image + text slider where it doesn't fire. THe event does fire on the pink button. Does not compute for me really... why does it work for the one, and not for the other?

Now I want to redirect people to the right blogpost with an onclick event on the containing div(slider) with the black borders. The only puzzling thing is, the click event doesn't fire, nor does the cursor get changed to the right image(a hand) as defined in the css stylesheed, but the 1px border does get added.

On a test div, in my code on http://jsfiddle.net/GsgPM/16/ below my trouble code it does fire. On another page of my blog I have no issues at a ll with the click event.

when I view the code changes in google chrome inspect elements window the click event does get transported on the div changes.

JSLint shows no errors, my console doesn't show any errors either. The entire event simply doesn't fire.

Who knows what the underlying cause is for this problem?

Answer 1

The problem is the shadow div. When you click on your slider, the click is registered on the div with id="shadow". Try to remove that div, and then it works. If you need that div, you have to make sure it is below the slider divs.

Answer 2

In your code you have

onclick="window.alert('Hello Raxacoricofallapatorius'

your missing a ); so it would be

onclick="window.alert('Hello Raxacoricofallapatorius');

A more Jquery way to react to click on img is to use on

$('#smallphotos div').on('click','img',function() {
        alert('here');
    });

to further this you could store the target on a data attribute like

<img src="http://www.freedigitalphotos.net/images/gal_images/av-_50.jpg" title="test2" data-target="www.google.com" />

which could then redirect your page like so.

 $('#smallphotobox').on('click','#smallphotos div',function() {
    window.location.href=$(this).data('target');
});

Also #slider is in the way you will notice i removed it and everything works.. try setting its z index to be behind the rest.

NOTE this wont work on jsfiddle due to restrictions.

fiddle