déterminer $ (this) dans jquery

Question

Un problème commun que j'ai est de se perdre à quoi $ (this) se réfère.

Je vais souvent essayer de donner un peu de style bizarre:

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

qui aide parfois.

Je suis perplexe avec ce qui suit cependant. Ma question peut peut-être être répondue de deux façons:

1) Y a-t-il une façon universelle de «voir» à quoi se réfère $ (this) dans une situation donnée? Peut-être en combinaison avec firebug? 2) plus précisément, une idée de ce que $ (this) devrait faire référence dans cet exemple ci-dessous? Je suppose qu'il aurait été l'entrée avec une classe de btnSave mais ne semble pas être:

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

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

Answer 1

1) Utilisez la console Firebug:

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

2) savePanel() a gagné » t avoir le contexte correct pour utiliser $ (this). Vous pouvez essayer:

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

Answer 2

première question (en utilisant Firebug):

1. place un point d'arrêt quelque part dans le contexte que vous voulez étudier (par exemple à l'intérieur savePanel() dans votre exemple).
2. Lorsque votre application atteint le point d'arrêt, ajoutez $(this) au panneau de la montre et développez-la pour afficher ses propriétés.
3. La première propriété doit être "0", ce qui correspond au premier noeud DOM correspondant à l'objet jQuery (dans ce cas, this).
4. Si vous passez la souris sur la valeur "0", Firebug mettra en surbrillance ce noeud DOM sur la page. Si vous cliquez sur la valeur, Firebug basculera vers l'onglet HTML et fera défiler jusqu'à cet élément.

Deuxième question:

• A l'intérieur de votre fonction anonyme, this se référera à l'élément <input />.
• À l'intérieur de savePanel(), this fera référence à l'objet window.

Si vous voulez savePanel() avoir accès à l'élément <input />, il existe une variété de façons de le faire. Le plus simple dans votre cas serait de passer dans de la fonction anonyme:

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

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

Answer 3

Dans votre exemple de code que vous rencontrez un problème JavaScript classique avec un contexte perdu pour cette, car appeler une autre fonction d'un anonyme La fonction perdra le contexte de la fonction anonyme (read more about it here).Lorsque savePanel est appelé comme vous le faites, ce fera référence à l'objet fenêtre. Vous pouvez garder le contexte de ce, du gestionnaire d'événements, en utilisant call or apply lors de la délégation de la méthode:

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

Answer 4

« this » est le javascript est souvent source de confusion, car il semble syntaxiquement comme une variable et implique donc l'idée de le faire circuler. En fait, "ceci" ressemble plus à une fonction et renvoie toujours le contexte d'exécution actuel, c'est-à-dire le contexte auquel la fonction en cours a été appelée ou appliquée.

Si je ne me trompe pas, jquery tente d'exécuter un rappel dans le contexte du liant de rappel a été appelé, qui est

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