Trouble with returning a correct element ID

Question

I've got three links which serve as sorting headings for a table, each is a member of the "sort" class. I wrote a simple jquery function that gets triggered when any "sort" class link is clicked. There's a switch case that assigns a certain column number (columnNum) to be used with the tablesorter plugin. However, right now I'm getting some weird values returned for the id of the sort classes.

$(".sort").toggle(function() { 
    // the column id's are datecaption, hourscaption, taskcaption
    var column = $(this).attr('id');
    var columnNum;

    switch(column){
        case 'datecaption':
            columnNum = 1;
            break;
        case 'hourscaption':
            columnNum = 2;
            break;
        case 'taskcaption':
            columnNum = 3;
            break;
        default:
            break;
    }

    var sorting = [[columnNum,1]]; 
    $("#task_table").trigger("sorton",[sorting]); 
    return false; 
}, function(){
    var sorting = [[columnNum,0]]; 
    $("#task_table").trigger("sorton",[sorting]); 
    return false;               
});  

If I alert the column variable, I get "aeaoofnhgocdbnbeljkmbjdmhbcokfdb-mousedown"--which doesn't serve the rest of the function well.

Can anyone tell me why this might be happening?

Thanks

Answer 1

Without more code or the HTML it's hard to say. My guess is $(this) isn't what you think it is. Try adding console.log($(this)); (preferably in Firebug) click the result and you will see what $(this) is actually referring to.

Additionally, you could query the DOM for $('#aeaoofnhgocdbnbeljkmbjdmhbcokfdb-mousedown') and see and you should get the element $(this) is referring to.

For more information on what "this" will refer to in different situations, check out the Mozilla Developer Network: https://developer.mozilla.org/en/JavaScript/Reference/Operators/this