Événement onclick sur div not firing

Question

J'ai un curseur image + texte avec des blogposts récents qui passent en revue les posts récents pendant qu'un vistor continue de regarder une certaine page.

Vous pouvez voir tout le code sur http://jsfiddle.net/GsgPM/16/ Il s'agit de la grande image + curseur de texte où il ne tire pas. L'événement tire sur le bouton rose. Ne calcule pas pour moi vraiment ... pourquoi ça marche pour l'un, et pas pour l'autre?

Maintenant je veux rediriger les gens vers le bon blogpost avec un événement onclick sur le div (curseur) contenant les bordures noires. La seule chose curieuse est que l'événement click ne se déclenche pas, et que le curseur ne soit pas changé pour l'image de droite (une main) comme défini dans la chaîne de styles CSS, mais la bordure 1px est ajoutée.

Sur un div de test, dans mon code sur http://jsfiddle.net/GsgPM/16/ en dessous de mon code de trouble, il se déclenche. Sur une autre page de mon blog, je n'ai aucun problème à un ll avec l'événement click.

lorsque j'observe les modifications de code dans la fenêtre google chrome inspect elements, l'événement click est transporté sur les modifications div. JSLint ne montre aucune erreur, ma console ne montre aucune erreur non plus. L'événement entier ne se déclenche tout simplement pas.

Qui sait quelle est la cause sous-jacente de ce problème?

Answer 1

Le problème est le div ombre. Lorsque vous cliquez sur votre curseur, le clic est enregistré sur la div avec id = "shadow". Essayez de supprimer cette div, puis cela fonctionne. Si vous avez besoin de ce div, vous devez vous assurer qu'il est en dessous des divs slider.

Answer 2

Dans votre code, vous avez

onclick="window.alert('Hello Raxacoricofallapatorius' 

votre manque a); il serait

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

Une façon plus Jquery à réagir à cliquer sur img est d'utiliser sur

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

pour faire avancer ce que vous pouvez stocker la cible sur un attribut de données comme

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

qui pourrait ensuite rediriger votre page comme ça.

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

également #slider est dans la façon dont vous remarquerez je l'ai enlevé et tout fonctionne .. essayez de définir son index z pour être derrière le reste.

NOTE Cela ne fonctionnera pas avec jsfiddle en raison de restrictions.

fiddle