Is it possible to bind a click event to an image inside a button?

I'm trying to get a button with an image inside it to fire an event. Browser is FF4.

<button>
  <img src="/exp.jpg" />
</button>

jQuery

$('img').bind('click', function() {
  window.alert('I was clicked');
});

This however never triggers a click event? Can anyone point me in the right direction开发者_如何转开发 as to why and what I need to read to understand this behaviour?

Many Thanks,

Si

Update: Thanks everyone for the answers and comments. This behaviour struck me as odd to begin with but now makes sense. Cheers!

Your code works in Chrome, here's a demo.

However, all other browsers I've tried appear to do what you say.

If you're really after that effect you may have to use CSS to position the image above the button.

Something like this demo should give you more cross-browser consistency.

To begin with this will work but will be browser specific, Town answered that it does work but it depends on your browser and after that the version of that browser. The basic button function is hardcoded into the browser so changing that is going to be buggy at best. I would suggest using a img and css to style the img border and background to look like a button.

Truthfully you may get it to work in one two or even three browsers but the aim of a developer is to make it as universal as possible (with exception to IE6 that is) so i would use your skills in the area of design to achieve what you want, it will save you a lot of headache.

I'm not sure why you'd want to do that. Clicking the image will cause the button to be clicked too. Why not piggy-back onto that event?

http://jsfiddle.net/Jaybles/hHBdX/2/