Selecting an event target from within nested functions

Question

I'm having some trouble with JQuery selections. I have a click handler that handles the logic when a user clicks a row in a table. However, when some of these rows are clicked, the click logic will find that they have invalid data and I would like to gray them out. I am doing this by adding an appropriate CSS class to turn their text gray (and otherwise disable them).

My basic structure is something like:

$('#tableInfo tr').live('click', function(){

    function doStuff(){
        //Ajax call
        $.ajax({
        ...
        ...
        )}.success(function(){
            ...
        } else {
            var target = $(event.target);
            target.addClass('disabled');
        }
    });
});
var information = $(#misc-information)
doStuff(information)

That's the basic idea at least. I care about the stuff in the else block, which is not working as I'd thing it should. I did some research on how to handle this sort of logic, and event.target seemed like exactly what I was looking for for selecting the current origin of an event (the row that was clicked that I want to disable). I'm nested inside an event handler, and I'm selecting the event target, but this seems to do nothing and I'm not sure why.

Any help appreciated.

Answer 1

you did not pass the event object and target is misspelled

$('#tableInfo tr').live('click', function(event){ // event param here

    function doStuff(){
        //Ajax call
        $.ajax({
        ...
        ...
        )}.success(function(){
            ...
        } else {
            var target = $(event.target); // typo here
            target.addClass('disabled');
        }
    });
});