Retrieving id of an object that was clicked in jquery

Question

var ul = $(".display-movie");
for (var i = 0 ; i < response.movies.length; i++) {
    var img = $("<img>").attr("src", response.movies[i].posters.thumbnail)
                .css("width", "200px")
                .css("height", "200px")
                .css("margin", "20px")
                .click(click_pressed);
    var text = response.movies[i].title;
    var row = $("<li> <div>");
    var endrow = $("</div> </li>");
    ul.append(row , img , text , endrow);

In the above code, the click function works well and displays and alert. But what I want is that when clicked the alert should display the ID of the object that was clicked so that later I can retrieve details of this object using its id.

function click_pressed() {
    alert($(this.title));
}

Already answered here : http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery — Peshal, Feb 10 '14 at 04:41

jfriend00 · Answer 1 · 2014-02-10T05:07:17.920

To show the id, you would just reference that property off the this pointer which will point to the DOM object that caused the event.

function click_pressed() {
    alert(this.id);
}

Your question said "id", but your code looks like you wanted the title. In that case, you would use:

function click_pressed() {
    alert(this.title);
}

You don't need jQuery inside the event handler to just access properties of the DOM object. If you wanted to use other jQuery methods on the click item, you could create a jQuery object for the click-on item with $(this) and then you could do other things such as $(this).find("xxx") or whatever other jQuery methods you needed. But, to just access regular properties of the DOM object, jQuery is not needed.

Great answer with a good explanation, will be referring to this in the future, +1 — Fizzix, Feb 10 '14 at 05:00

Arun P Johny · Answer 2 · 2014-02-10T04:56:05.997

0

this refers to the dom element which was targetted by the event, so try

function click_pressed() {
    alert(this.id);//alerts id
    var $this = $(this);
    //then use $this to access other jQuery methods
}

you don't require the id of the clicked element to access other properties because you can use the dom element reference to get the corresponding jQuery object

edited Feb 10 '14 at 04:56

answered Feb 10 '14 at 04:42

Arun P Johny

384,651
66
527
531

Hi, don't you need `e.target` here? How can you pass the `e`? `call()`? ;) – loveNoHate Feb 10 '14 at 04:45

score 0 · Answer 3 · edited Feb 10 '14 at 05:36

0

You can better use onclick function and can send attribute values of current element like this

<img id="abc" onclick="yourfunction(this.id)">

So this function will send id value as "abc" to yourfunction.

Your further JS function will be like this

function yourfunction(id) 
{
}

edited Feb 10 '14 at 05:36

Zaheer Ahmed

28,160
11
74
110

answered Feb 10 '14 at 04:48

Noman Riffat

187
2
2
16

score 0 · Answer 4 · edited May 23 '17 at 12:28

I do not know if you need this functionality here (a JSFIDDLE wouldn't be bad), since you attached the .on('click'...), as a long version of .click(), to the <img/>, but if you needed the actual element that was clicked inside a more complex structure, you could use

click_pressed = function(e) { console.log($(e.target)) }

$('div').click(function(e){
  click_pressed.call(this, e)
  console.log($(this))
})

JSFIDDLE: http://jsfiddle.net/23uGK/1/

The call() method calls a function with a given this value and arguments provided individually. MDN

Everything else is said, you have to retrieve the title then with the methods the others gave!! : )

*Solution actually courtesy to KevinB found here.

Retrieving id of an object that was clicked in jquery

4 Answers4

JSFIDDLE: http://jsfiddle.net/23uGK/1/