Question

I working on a web page which has a similar structure like this:

<div id="mydata">
<img src="" >
<img src="" >
<img src="" >
<video src=""></video>
<video src=""></video>
<img src="" >
<img src="" >
</div>

so it’s a combination of video & images inside mydata div.

Now what i want to do is:

if my user click on image then a alert comes and shows “it’s an image” and if click on video then alert shows “it’s an video”

please tell me how can i do this using jquery?

Answer 1

Like so:

$('#mydata').click(function( event ) {
    alert( 'clicked node: ' + event.target.nodeName );
});

We make usage of the fact that most browser events ‘bubble up’ the tree. So it’s just enough to bind a click-event handler to that parent div and check for the event.target‘s node name.

example: http://jsfiddle.net/7YEb2/