Get the id of a the item that is clicked

Question

I have this html code:

FOO
FOO2


        

Answer 1

This is called event delegation in Javascript. More info can be found in Zakas blog http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/

The idea in few words is you attache the event to a parent node and then waiting for some event on the child node. In the example below I attach the onclick event to the document itself. Then inside the event handler you will write a switch statement to check the clicked element id, then do what you want to do for that element

document.onclick = function(event){
    //IE doesn't pass in the event object
    event = event || window.event;

    //IE uses srcElement as the target
    var target = event.target || event.srcElement;    

    switch(target.id){
        case "foo1":
            foo1();
            break;
        case "foo2":
            foo2();
            break;
        case "foo3":
            foo3();
            break;
        //others?
    }
};


//some dummy handlers
var foo1 = function(){ 
    alert("You clicked foo1");
    };

var foo2 = function(){ 
    alert("You clicked foo2");
    };

var foo3 = function(){ 
    alert("You clicked foo3");
    };

For how to implement event delegation in jQuery you can check http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

try this. You can use keyword "this" to retrieve the attr ID...

$('b.edit').click(function(){ alert($(this).attr("id")); });

Answer 3

I'm assuming from your sample code that you're using jQuery? If so you can get the id as follows:

$('b.edit').click(function(){
 this.id;
});

EDIT:

The direct reference to the attribute is indeed more efficient if all that is required is simply the id.

Also can be obtained from the jQuery object:

$('b.edit').click(function(){
 $(this).attr('id');
});

Sample fiddle: http://jsfiddle.net/5bQQT/

Answer 4

When passing a click handler in JQuery, you actually have a reference to something called an event object. This event object has a property called target, which is a reference to the element that was clicked.

$('b.edit').click(function(eventObject){
    eventObject.target // this is the element that was clicked.
});

Since you have a reference to the target element, you can do whatever you like. In this case, you could just access eventObject.target.id.