Question

I’m coming from a Prototype background and looking into JQuery. I’d like to know the ‘right’ way to do attach a click event to a bunch of elements, but then know in the event handler which one of my elements was clicked.

I’ve come up with the following:

MYNS.CarouselHelper.prototype.attachImgHandlers = function () {

  $j(".carouselItem").bind("click", this, function(e){ e.data.openCarouselImage(e) });

}

I then have the following in my event handler:

MYNS.CarouselHelper.prototype.openCarouselImage = function(e) {

    var img = e.currentTarget;
    // Do stuff to the image element

};

Is this ‘right’? It feels wrong to me as I am used to explicitly passing the element to the event handler in Prototype as I loop through an array of elements.

Answer 1

In the callback to the event, you can access the item as this. Like so:

$('.foo').bind('click', function(e) { // e is the event
    $(this).html('clicked'); // do something to the element, or whatever
});