Jquery Get Matched Selector Text From Inside Function

Question

Is there any way to get the text of the selector that invoked some function (if it exists) from within the function?

For example

$('#foo, .bar').click(function() {

   // Here I want to figure out if there was a match on #foo, or .bar

});

Basically I want to have a compounded selector like the one above (http://api.jquery.com/multiple-selector/) but be able to know which one was matched when I get inside the function.

Answer 1

You can get that info with the event object.

$('#foo, .bar').click(function(event) {

   if(event.target.id === 'foo'){
      alert('foo');
   }
   else if(event.target.className === 'bar'){
      alert('bar');
   }

});

Example: http://www.jsfiddle.net/8CACU/

Ref.: http://api.jquery.com/event.target/

Answer 2

$('#foo, .bar').click(GOTEMM(event) {

if(event.target.id === 'foo'){ alert('foo'); } elseif(event.target.className === 'bar'){ alert('bar'); }

Answer 3

You can use $(this) inside the callback to get the actual element and access the attribute of the element that is used in the selector.

$('#foo, .bar').click(function() { 
    if($(this).attr('id') == 'foo')  {
        alert('foo handled');
    } else if($(this).hasClass('bar')) {
        alert('bar handled');
    }
});

jsfiddle sample: http://jsfiddle.net/us8r9/