Get ID of Element Being Clicked and Pass as Parameter?

Question

How does one, through jQuery, get the ID of an element that is being clicked on and then pass it as a parameter into a function? Example jQuery code below.

jQuery(document).ready(function() {
    var id = this_id;
    jQuery(".lightbox a").click({param: id}, functionName);
});

May I note that the "param" parameter is integral to the structure of the function.

Apologies all, I am no Javascript master by any means.

That makes no sense, the document has no id, and `this_id` should probably be `this.id`, not that it would work that way either ? — adeneo, Jun 18 '13 at 15:54
What is `this_id` here? Your code example doesn't seem to be related to your question. — Felix Kling, Jun 18 '13 at 15:54
possible duplicate of [Getting the ID of the element that fired an event using jQuery](http://stackoverflow.com/questions/48239/getting-the-id-of-the-element-that-fired-an-event-using-jquery) — Kevin B, Jun 18 '13 at 15:56

score 5 · Answer 1 · answered Jun 18 '13 at 15:54

5

Within the click handler, you can access the element ID with this.id or $(this).attr('id'):

jQuery(document).ready(function() {
    jQuery(".lightbox a").click(function(){
        functionName(this.id);
    });
});

answered Jun 18 '13 at 15:54

MrCode

63,975
10
90
112

1

@roasted, indeed it can be done without the anonymous function but for me the anonymous function makes it a little more flexible. Consider if you wanted to call `functionName` from elsewhere other than an event handler. You would have to set the `this` context before calling it instead of just passing an ID and if you didn't have a handle on the element, you'd have to also lookup the DOM too. In any app that is not completely trivial, I would not want the function to be dependent on the click.. – MrCode Jun 18 '13 at 16:11

adeneo · Accepted Answer · 2013-06-18T16:09:06.630

I'm guessing the point is to pass event data to a function that expects that, as ,click() supports the .click( [eventData ], handler(eventObject) ) syntax, and if so, you have to iterate the collection yourself:

jQuery(document).ready(function($) {
    $(".lightbox a").each(function() {
        $(this).click({param: this.id}, functionName);
    });
});

EDIT:

You could do this with on() as well:

jQuery(document).ready(function($) {
    $(".lightbox a").each(function() {
        $(this).on('click', {param: this.id}, functionName);
    });
});

FIDDLE

score 3 · Answer 3 · answered Jun 18 '13 at 15:53

3

You can use this.id inside a click event, example:

jQuery(".lightbox a").click(function() {
    var id = this.id;

    //pass to a function
    testFunction(id);
});

function testFunction(param) {
    console.log(param);
}

answered Jun 18 '13 at 15:53

tymeJV

103,943
14
161
157

score 3 · Answer 4 · answered Jun 18 '13 at 15:54

3

It's easy just access to the this element to get the clicked element, then extract its id and save it into a variable like this:

jQuery(".lightbox a").click(function(){
  var id = jQuery(this).attr("id");
  callFunction(id);
});

answered Jun 18 '13 at 15:54

Skatox

4,237
12
42
47

1

Whenever you write `$(this).attr('name')` or `$(this).prop('name')` it's usually better and easier to write `this.name`. – Felix Kling Jun 18 '13 at 15:55
3

Ok, then I will elaborate a bit. `$(this).prop('name')` is reading the `name` property of the DOM element `this` is referring to. But then you can directly access the property and avoid the overhead of creating a jQuery object and call a method (just do `this.name`). Technically, `$(this).attr('name')` is equivalent to `this.getAttribute('name')`, but when working with DOM elements you want the updated DOM properties instead of the HTML attributes, so again, you would just use `this.name`. – Felix Kling Jun 18 '13 at 16:00
2

@FelixKling good explanation. It's like asking someone to pass the sauce instead of just grabbing it yourself. – MrCode Jun 18 '13 at 16:44

score 3 · Answer 5 · answered Jun 18 '13 at 15:55

3

http://jsfiddle.net/pArW6/

jQuery(document).ready(function() {
   jQuery(".lightbox a").click(functionName);
});

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

answered Jun 18 '13 at 15:55

A. Wolff

74,033
9
94
155

Grant Thomas · Answer 6 · 2014-10-20T09:27:21.743

2

You can use this.id or $(this).attr("id");, but you might want to get a reference to $(this) - wrapped or not - immediately and work from a variable if you do much of anything else in there.

edited Oct 20 '14 at 09:27

answered Jun 18 '13 at 15:53

Grant Thomas

44,454
10
85
129

score 2 · Answer 7 · answered Jun 18 '13 at 15:55

2

You can you Use $(this).att("id").

$(".lightbox a").click(function() {
    var ID=$(this).att("id");

    //pass to a function
    TestFunction(ID);
});

function TestFunction(P) {
    console.log(P);
}

Live example

http://jsbin.com/enobop/1/edit

answered Jun 18 '13 at 15:55

Misters

1,337
2
16
29

score 2 · Answer 8 · answered Jun 18 '13 at 15:55

You can do this:

jQuery(document).ready(function () {
    jQuery(".lightbox a").click(function (e) {

        // Cancel the default action (navigation) of the click.
        e.preventDefault();

        // 'this' here refers to the link being clicked in the current scope
        // you can check the console for the id for debug purpose
        console.log(this.id);

        // pass the id to the function
        functionName(this.id);
    });
});

score 2 · Answer 9 · answered Jun 18 '13 at 15:57

2

Another way is to use the event parameter that gets passed to the callback function.

jQuery(".lightbox a").click(function(ev) {
    console.log(ev.target.id);
}

Of course it's a mix of jQuery and pure JS.

answered Jun 18 '13 at 15:57

asafreedman

572
4
10

don't worry, jquery is after all js – A. Wolff Jun 18 '13 at 16:07

score 2 · Answer 10 · answered Jun 18 '13 at 15:58

2

Usually you have a function for an event declared with function(event) and the event has a target and the id of the target is, what you want. So

$("SomeElement").on("click", function(e){ callanotherFunction(e.target.id) })

does, what you wanted

answered Jun 18 '13 at 15:58

Thomas Junk

5,588
2
30
43

Get ID of Element Being Clicked and Pass as Parameter?

10 Answers10