1

My HTML is like so:

    <img src="/path" id="img_1">
    <img src="/path" id="img_2">
    <img src="/path" id="img_3">
    <img src="/path" id="img_4">

I want to alert out the id of the button that was clicked.

How can I accomplish that?

Naftali
  • 144,921
  • 39
  • 244
  • 303
Asim Zaidi
  • 27,016
  • 49
  • 132
  • 221

3 Answers3

5
$('img').click(function(){
   alert(this.id);
}); //try that :-)

DEMO

Or a more 'dynamic version' (if you are adding the images by ajax or some other implementation):

$('img').live('click', function(){
   alert(this.id);
}); //try that :-)
Naftali
  • 144,921
  • 39
  • 244
  • 303
  • yes that works but problem is that it loops through all the images...I just want the id of the ig=mg clicked – Asim Zaidi May 05 '11 at 17:53
  • @Autolucus, that does not loop through all of the images. it just attaches the click handler to all of them. do you not understand how jQuery works? – Naftali May 05 '11 at 17:54
  • @Autolycus No, it does not "loop through all the images" it binds the onclick event to all the images, and runs that function for any image clicked. – Chad May 05 '11 at 17:55
  • lol opps sorry @Neal working demo of neal's solution http://jsfiddle.net/mcgrailm/FXCDF/ – mcgrailm May 05 '11 at 18:02
  • '.live()' is deprecated, here a migration guide https://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function – Thecave3 Mar 06 '18 at 09:33
4
$("img").click(function() {
  alert($(this).attr("id"));
});
Germán Rodríguez
  • 4,284
  • 1
  • 19
  • 19
  • also might be better to do `$(this).prop('id')` with new jQuery spec if you are going to do it that way – Naftali May 05 '11 at 17:53
2

With jQuery:

$('img').click(function() {
   alert($(this).attr('id'));
});

Or plain JS:

function handleClick(sender) {
   alert(sender.id);
}

<img src="/path" id="img_1" onclick="handleClick(this);" />
<img src="/path" id="img_2" onclick="handleClick(this);" />
<img src="/path" id="img_3" onclick="handleClick(this);" />
<img src="/path" id="img_4" onclick="handleClick(this);" />
Chad
  • 19,219
  • 4
  • 50
  • 73
  • 2
    try to avoid inline js. and why not do `this.id` in the jQuery example? – Naftali May 05 '11 at 17:51
  • @jball was a typo I had already fixed, and @Neal ofcourse you could do that as well, was just showing the jQuery methodology of accessing the ID – Chad May 05 '11 at 17:52
  • @chad, the jQuery method is `this.id`, `$(this).attr('id')` just gets the attribute set on creation, which can change, `this.id` gets the id property – Naftali May 05 '11 at 17:54
  • +1 using onclick="handleClick(this)" is far better than assigning the click handler using jquery (as @Neal & @GerMason) because the handler is static and not dynamic. using jquery inside the "handleClick" function is fine. – Cos Callis May 05 '11 at 17:55
  • @Cos, it is `dynamic` if you add the live part to it. – Naftali May 05 '11 at 17:57
  • @Neal, it doesn't NEED to be dynamic. same function every image. You should not use dynamic assignment of the event handler, ala jquery, when the assignment is to every element. Save dynamic handlers for dynamic conditions. – Cos Callis May 05 '11 at 18:01
  • IMHO you should always keep your js out of the html it should either be in the head or loaded from a separate file just like css style has been separated from html (99% anyhow) – mcgrailm May 05 '11 at 18:08
  • @All Before this argument goes anymore, let me clarify my answer: I was not reporting either solution to be better than the other. I was just giving options. I gave the jQuery method or if he did not want to use a library the plain JS method; that is all. If you want to discuss best practice, there are plenty of other places. – Chad May 05 '11 at 18:11
  • @Chad we should always promote best practices in our posts – mcgrailm May 05 '11 at 18:16
  • 1
    @mcgrailm I agree, however the "best practice" in this case is subjective and prone to long hours of heated arguments about how you should format your code. And posting a comment is one thing, but arguing about it in a comment section for about 10 posts is different. – Chad May 05 '11 at 18:18