Question

A common issue I have is getting confused what $(this) is referring to.

I often will try to give it some odd style:

$(this).css("border","10px solid red")

Which helps sometimes.

I’m stumped with the following however. My question can maybe be answered in two ways:

1) is there a universal way to ‘see’ what $(this) is referring to in any given situation? Perhaps in combination with firebug?

2) more specifically, any idea what $(this) should be referring to in this sample below? I assumed it would have been the input with a class of btnSave but doesn’t seem to be:

$(ajaxContainer).find("input.btnSave").click(function(){
    savePanel();
});

function savePanel() {
    $(this).css("border","10px solid red");
};

Answer 1

1) Use the console in Firebug:

var obj = $(this);
console.log(obj);

2) savePanel() won’t have the context correct to use $(this). You could try:

$(ajaxContainer).find("input.btnSave").click(function(){
    $(this).css("border", "10px solid red");
});