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

Question

Hi there,

I have been using the following method for adding a click event to an id, I was wondering if i could do the smae 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

Ok i have the working solution but i don't fully understand why, i woudl 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 enver 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 clal my clear_click..

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

When ever i need to call a callback function or similar i should first open a function() and then call the method inside the fucntion?

Thanks in advance

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