jQuery: How do I add a click handler to a class and find out which element was clicked?

Question

I have been using the following method for adding a click event to an id, I was wondering if I could do the same with a class.... I have a number of items (which are created in a for each loop) and I need to be able to click them and then pickup which was clicked... here is my existing code

$('submit-button').bind('click', submit_click);


function submit_click() {
    alert('I am clicked');
}

I was wondering if there is some way to pass in a variable into my function for the click so i can check the ID?? or similar

hence this

function submit_click(element) { // notice element
    alert(element + ' clicked');
}

Any help really appreciated

Thank you

EDIT

I have tried the following and in debug "elem" is undefined...

$('.clear').bind('click', clear_click($(this)));

   function clear_click(elem) 
   {
        alert(elem.attr("id"));
   }

WORKING SOLUTION

I have the working solution but I don't fully understand why, I would love to know why it works..

First of all I tried

 $('.clear').bind('click', clear_click($(this)) );

This seemed to work "BUT" when I loaded the page it enter the "clear_click" method without being clicked - strange...

Then I tried this..

 $('.clear').bind('click', function() { clear_click($(this)) } );

This works great! But I don't understand why I must pass a function and then within this function call my clear_click.

Can anyone explain why 1 works and the other doesn't?

Whenever I need to call a callback function or similar I should first open a function() and then call the method inside the function?

Answer 1

$(".yourclass").click ( function() {
    $(this).attr ( "id" ); //S(this) returns the current element
});

and you can code like this

$('.yourclass').bind('click', function() { submit_click($(this)) });

function submit_click(elem) 
{
    alert ( elem.attr ("id" ) );
}

Edit

   $('.clear').bind('click', function() { clear_click($(this)) });

   function clear_click(elem) 
   {
        alert(elem.attr("id"));
   }

This will work fine for you.

Answer 2

Update

To answer your second question:

You can bind a function as a second argument when using the click event, but you cant bind a function and apply arguments. On the other hand, there is no need to send this as an argument to the clear_click function since the this keyword inside the function refers to the element itself:

So this works in your case:

$('.clear').bind('click', clear_click);

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

Sending this as an argument is not needed and bad coding:

$('.clear').bind('click', clear_click(this));

In the event handler, the first argument is the event object. You can extract the clicked element from that object using currentTarget or target . In jQuery, this always refers to the currentTarget in the event handler context:

var handler = function(e) {
  var id = this.id; // this == e.currentTarget
}

$('submit').click(handler); // .click(fn) is shorthand for .bind('click', fn)

More examples:

$('submit').bind('click', function(e) {

    console.log(e.target) // the target that was clicked on
    console.log(e.currentTarget) // the element that triggered the click
    console.log(this) // the same as above

});

Answer 3

This should work:

$('.submit-button').bind('click', submit_click($(this)));

function submit_click(element) { // notice element
   alert($(element).attr("id") + ' clicked');
}

Answer 4

Just add $(this) to your function, You don't need to send any parameters because you are still in the context of the clicked element.

function submit_click() { // notice element
            alert($(this).attr('id') + ' clicked');
        }

Answer 5

When you bind a handler to a function, the clicked element will be the first argument

$('.submit-button').click(submit_click);

function submit_click(element){
  //element is the .submit-buttom element
  alert(element+'  was clicked');
  alert($(element)+' was clicked');
}