javascript - onclick event on div not firing - Stack Overflow

admin管理员组

文章数量:1401122

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 / It is about the big image + text slider where it doesn't fire. THe event does fire on the pink button. Does not pute 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 / 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?

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/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 pute 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/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?

• javascript
• jquery
• css
• html
• onclick

Share Improve this question Follow edited Jul 4, 2012 at 8:21 Tschallacka asked Jul 4, 2012 at 8:08 TschallackaTschallacka 28.8k1515 gold badges9898 silver badges139139 bronze badges 2

• So are you trying to get "click me" to go to a url or the slider content – AbstractChaos Commented Jul 4, 2012 at 8:11
• No, I want people whenever they click anywhere within the black border to go the specified url. – Tschallacka Commented Jul 4, 2012 at 8:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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/images/gal_images/av-_50.jpg" title="test2" data-target="www.google." />

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

本文标签： javascriptonclick event on div not firingStack Overflow