Question

I have this function which gets executed when a link is clicked.
But there seems to be an issue with that. When I use some text for the same link.

The function seems to get executed well, but except when I place an image in the same place,
then event handler function doesn’t seem to be working.

I created a Fiddle for this one: http://jsfiddle.net/bkvirendra/5QqUB/

When the link is clicked a ul list is shown. And when the user clicks anywhere instead of the link the ul list gets disappeared.
So when I place an image instead of the text its doesn’t seem to be working!
How can I show the same ul list when the image is clicked?

Answer 1

The problem is because when you click the image, the event target becomes the img tag, not the a tag.

Try this:

$(".item").hide();
$("#a").click(function(e) {
    e.stopPropagation();
    $(".item").show();
});

$(document).click(function() {
    $(".item").hide();
});

Example fiddle

You should also consider removing the $(".item").hide() line and using display: none in CSS instead.