How can I manipulate this object in jQuery

Question

jQuery(function () {
    $('#square a').click(function(e) {  
    // How is the e object structured
    }); 
})

I have a div with an id of square and links in that. When the links are clicked they trigger a game loop function. I need to know which id the click is coming from. There are five links within the square and each one has an id. Is there a better way to track this. Or should I have a function for each link with its own id but this doesn't seem DRY to me.

Answer 1

Inside an event handler you can refer to the DOM element the event was triggered on with this:

$('#square a').click(function(e) {  
    alert(this.id);
});

So jQuery makes it very convient to access the element.

If you have to execute different code based on the ID, I suggest to create some kind of map:

var actions = {
    action1: function() {

    },
    action2: function() {

    },
    ...
}

and then just execute the function from the map:

$('#square a').click(function(e) {  
    actions[this.id]();
});

Just make sure you give the elements meaningful IDs.

Answer 2

The e in your code is an event object. The docs for that are here. Within an event handler, this refers to the DOM element that you have hooked the handler to (not wrapped in a jQuery instance). So for instance:

jQuery(function ($) {
    $('#square a').click(function(e) {  
        alert(this.href);
    }); 
});

...would show the href of the link that was clicked.

Since click events bubble up the DOM, and they also have a default behavior on a elements (following the link), you may particularly be interested in event.stopPropagation (stop the event bubbling any further up the DOM) and event.preventDefault (prevent the default action). You can get the effect of calling both of those if you simply return false out of your event handler, but sometimes you only want to do one or the other.

Answer 3

Something like this?

<div id='square'>
  <a id='link1'>Go forward!</a><br />
  <a id='link2'>Look left</a><br />
  <a id='link3'>Stop!</a><br />
  <a id='link4'>Look right</a><br />
  <a id='link5'>Go back!!!</a>
</div>

$('#square > a').live('click',function(event){
  var whichLink = $(this).attr('id');

  if ( whichLink == 'link1' ) GoForward();
  if ( whichLink == 'link2' ) LookLeft();
  if ( whichLink == 'link3' ) Stop();
  if ( whichLink == 'link4' ) CantTouchThis();
  if ( whichLink == 'link5' ) Hammertime();
});

Answer 4

A good way to quickly check things like this is with the console of Firefox (Firebug), Chrome and Safari (I believe that Opera has something similar as well.):

If you run the following code on any web page with jQuery on it via the console of Firebug:

jQuery("body").click(function(e) { console.dir(e); });

You will see the following:

T. J. has provided another excellent source as well (the jQuery API docs.)

Answer 5

$('#square a').click(function(e) {  
    alert($(this).attr("id"));
}); 

I hope this is what you are looking for

Answer 6

Another way to get clicked element's id that has not been mentioned is through the event object and answers your question about e parameter:

jQuery(function () {
    $('#square a').click(function(e) {  
       alert(e.target.id);
    }); 
});

The advantage of using e.target.id is that you can obtain id of the child object that was actually clicked on, while this.id will always return id of the element click event handler was bound to.

Also, if you're going to use this there is no reason to declare e:

$(document).ready(function() {
    $('#square a').click(function() {  
       alert(this.id);
    });
});