determining $(this) in jquery

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");
});

Answer 2

First question (using Firebug):

1. Place a breakpoint somewhere in the context you want to investigate (e.g. inside savePanel() in your example).
2. When your application hits the breakpoint, add $(this) to the watch panel and expand it to view its properties.
3. The first property should be "0", which corresponds to the first DOM node matched by the jQuery object (in this case, this).
4. If you hover over the value for "0", Firebug will highlight that DOM node on the page. If you click the value, Firebug will switch to the HTML tab and scroll to that element.

Second question:

• Inside of your anonymous function, this will refer to the <input /> element.
• Inside of savePanel(), this will refer to the window object.

If you want savePanel() to have access to the <input /> element, there are a variety of ways to do it. The simplest in your case would be to pass it in from the anonymous function:

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

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