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

j-u-s-t-i-n · Accepted Answer · 2012-03-21 19:34:23Z

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

Yes, it turns out I was looking for the encasing span's ID, not the link's. I didn't know about logging to the console before so that's an invaluable tool for the future. Thank you!!
Glad I could help. Just an FYI since console.log is new to you. Make sure you take it out of 'production' code. Some browsers such as IE don't have a console defined, unless developer tools are open. So you'll get nasty undefined errors!
you can also use something like if(!console || !console.log){ console = {}; console.log = function(msg){}; } to prevent errors. There are a lot of other really useful console functions as well, getfirebug.com/logging

Collectives™ on Stack Overflow

Trouble with returning a correct element ID

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related