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

Question

I used the following method to add a click event to id, I was wondering if I can do the same with the class .... I have several elements (which are created in for each loop) and I need to be able to click on them and then the pickup that was pressed ... here is my existing code

$('submit-button').bind('click', submit_click); function submit_click() { alert('I am clicked'); } 

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

therefore it

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

Any help really appreciated

thanks

EDIT

I tried the following and there is undefined in the "elem" debugging ...

 $('.clear').bind('click', clear_click($(this))); function clear_click(elem) { alert(elem.attr("id")); } 

WORKING DECISION

I have a working solution, but I don’t quite understand why, I would like 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 by entering the "clear_click" method without clicking - weird ...

Then I tried this.

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

It works great! But I don’t understand why I should pass the function, and then inside my function call my clear_click.

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

When I need to call a callback function or the like, should I first open the 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 make the code as follows

 $('.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 for you.

Answer 2

Update

To answer the second question:

You can bind a function as a second argument when using the click event, but you cannot 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 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 argument is not required and poor coding:

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

In an event handler, the first argument is an event object. You can retrieve an element with a click from this object using currentTarget or target . In jQuery, this always refers to currentTarget in the context of the event handler:

 var handler = function(e) { var id = this.id; // this == e.currentTarget } $('submit').click(handler); // .click(fn) is shorthand for .bind('click', fn) 

Other 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 do not 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 first argument is the click of an element

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