CODEWITHSUNDEEP
javascriptjqueryfunction
Aaron Brewer
Aaron Brewer

Reputation: 3667

Get ID of Element Being Clicked and Pass as Parameter?

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.

Upvotes: 1

Views: 17722

Answers (10)

Grant Thomas
Grant Thomas

Reputation: 45083

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.

Upvotes: 2

adeneo
adeneo

Reputation: 318182

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

Upvotes: 5

Thomas Junk
Thomas Junk

Reputation: 5676

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

Upvotes: 2

asafreedman
asafreedman

Reputation: 572

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.

Upvotes: 2

palaѕн
palaѕн

Reputation: 73896

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);
    });
});

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

http://jsfiddle.net/pArW6/

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

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

Upvotes: 3

Misters
Misters

Reputation: 1347

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

Upvotes: 2

MrCode
MrCode

Reputation: 64526

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);
    });
});

Upvotes: 5

Skatox
Skatox

Reputation: 4284

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);
});

Upvotes: 3

tymeJV
tymeJV

Reputation: 104775

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);
}

Upvotes: 3

Related Questions