определение $ (это) в jQuery

"this javascript часто является источником путаницы, поскольку синтаксически выглядит как переменная и, следовательно, подразумевает идею передачи ее. Фактически, this больше похоже на функцию и всегда возвращает текущий контекст выполнения, то есть контекст, для которого была вызвана или применена текущая функция.

Если я не ошибаюсь, jquery пытается выполнить обратный вызов в контексте, в котором было вызвано связывание обратного вызова, то есть

 object1.object2.object3.bindSomeCallback(function() {
        object3 will be "this" in the callback
 })

В вашем примере кода вы столкнулись с классической проблемой JavaScript с потерянным контекстом для this , поскольку вызов другой функции из анонимной функции приведет к потерять контекст из анонимной функции ( подробнее об этом здесь ). Когда savePanel вызывается так же, как и вы, this будет ссылаться на объект окна. Вы можете сохранить контекст this из обработчика событий, используя вызов или применив при делегировании метода:

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

// OR

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

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

Первый вопрос (с использованием Firebug) :

1. Разместите точку останова где-нибудь в контексте, который вы хотите исследовать (например, внутри savePanel () в вашем примере).
2. Когда ваше приложение достигает точки останова, добавьте $ (this) на панель наблюдения и разверните ее, чтобы просмотреть ее свойства.
3. Первым свойством должно быть "0" , что соответствует первому узлу DOM, сопоставленному с объектом jQuery (в данном случае, this ).
4. Если вы наведете курсор на значение для «0» , Firebug выделит этот узел DOM на странице. Если щелкнуть значение, Firebug переключится на вкладку HTML и прокрутит до этого элемента.

Второй вопрос:

• Внутри вашей анонимной функции этот будет ссылаться на элемент.
• Внутри savePanel () , этот будет ссылаться на объект window .

Если вы хотите ] savePanel () , чтобы получить доступ к элементу , есть несколько способов сделать это. Самым простым в вашем случае было бы передать его из анонимной функции:

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

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