Question

I have the following widget

var a = $('#test').timetable({
            cell_click: openDialog
        });

whereby cell_click is an event generated by

_create:function(){ 
    dayBodyCells.click(function(){
            if( !$(this).hasClass('cell-inactive') ){
              var dic = self.getElementPos(this);
              self._trigger('cell_click', null,dic);        
        }
    });

and openDialog is the callback function. In the callback function for the dayBodyCells, i have this equaling the td element, which is what i expected. I’m curious – why does this inside function openDialog instead refers to #test?

Answer 1

Within a bound event handler (callback), this refers to the element on which the event was triggered. So:

$('#myid').click(function(){
    // this is the #myid element
})

In your code, dayBodyCells must be a td (as you expect) therefore this refers to it in the click handler. However, when you trigger the cell_click event, you must be firing it from the #test element (via self._trigger).

If self._trigger('cell_click', null,dic) were replaced with $(this).trigger('cell_click', null,dic), this would then refer to the td within openDialog

Have a look at http://www.pkshiu.com/loft/archive/2009/01/understanding-this-this-and-event-in-a-jquery-callback-function and http://api.jquery.com/category/events/