Le contrôle de la valeur de 'cette' jQuery événement

J'ai créé un "contrôle" à l'aide de jQuery et utilisé jQuery.étendre afin de vous aider dans ce que OO que possible.

Lors de l'initialisation de mon contrôle, j'fil de divers événements de clic comme

jQuery('#available input', 
            this.controlDiv).bind('click', this, this.availableCategoryClick);

Avis que je suis pasing 'ce' que les données de l'argument dans la méthode de liaison. Je fais ce que je puisse obtenir des données attachées à l'instance de contrôle plutôt de l'élément qui déclenche l'événement click.

Cela fonctionne parfaitement, cependant je soupçonne qu'il ya une meilleure façon

D'avoir utilisé le Prototype dans le passé, je me souviens d'une liaison de syntaxe qui vous a permis de contrôler que la valeur de " il " était dans l'événement.

Qu'est-ce que le jQuery façon?

Je ne sais pas pourquoi vous essayez de faire jQuery OO comme jQuery est plus fonctionnelle que OO.

InformationsquelleAutor Pat Long - Munkii Yebee | 2009-02-06

101

Vous pouvez utiliser jQuery.proxy() avec fonction anonyme, juste un peu bizarre que le "contexte" est le deuxième paramètre.
```
 $("#button").click($.proxy(function () {
     //use original 'this'
 },this));
```
InformationsquelleAutor Torbjörn Nomell
38

J'aime votre façon, en fait, l'utilisation d'une construction similaire:
```
$('#available_input').bind('click', {self:this}, this.onClick);
```
et la première ligne de ce.onClick:
```
var self = event.data.self;
```
J'aime cette façon parce que vous obtenez à la fois l'élément cliqué (ce) et le "il" de l'objet que l'auto sans avoir à utiliser des fermetures.
- c'est en fait très utile, la meilleure approche que j'ai vu jusqu'à présent.. merci mec!
- Solution élégante. Je l'aime.
- Vous 're intelligent comme moi 😀
- C'est le meilleur. Aucun autre complexe fermeture à code. Merci
InformationsquelleAutor davidfurber

jQuery a la jQuery.proxy méthode (disponible depuis la 1.4).

Exemple:

var Foo = {
  name: "foo",

  test: function() {
    alert(this.name)
  }
}

$("#test").click($.proxy(Foo.test, Foo))
//"foo" alerted

InformationsquelleAutor benpickles

21

Je ne pense pas que jQuery a une fonctionnalité intégrée pour que. Mais vous pouvez utiliser un helper de construction comme les suivantes:
```
Function.prototype.createDelegate = function(scope) {
    var fn = this;
    return function() {
        //Forward to the original function using 'scope' as 'this'.
        return fn.apply(scope, arguments);
    }
}

//Then:
$(...).bind(..., obj.method.createDelegate(obj));
```
De cette façon, vous pouvez créer des dynamiques "fonctions wrapper" avec createDelegate() que l'appel à la méthode à un objet donné son " ce " champ d'application.

Exemple:
```
function foo() {
    alert(this);
}

var myfoo = foo.createDelegate("foobar");
myfoo(); //calls foo() with this = "foobar"
```
- Les gars, ce post a été écrit en Février 2009, à cette époque il n'y avait pas jQuery.proxy() encore (paru dans v. 1.4, janvier 2010). Pas besoin de downvote.
- N'est-il pas à propos de donner les meilleures réponses le plus de votes? J'apprécie si obsolète réponses descendre-voté ou supprimé. Elle contribue à éviter l'égarement à mon humble avis.
- Bien sûr, la meilleure réponse devrait obtenir plus de voix, comme c'est le cas ici. Mais cela ne signifie pas que la deuxième meilleure des réponses devraient être en bas-voté. Qui diminue réputation et est tout simplement pas juste. Qu'attendez-vous de moi? Vérifier et réviser mes anciennes réponses sur une base régulière?
- Pas de. Je n'ai pas prétendre que vous n'avez rien fait de mal. À mon humble avis, ce scénario est tout simplement pas couverts par les mécanismes de la SORTE (au moins autant que je sache). Les réponses qui ont été très convenable à un moment eu upvoted et y rester, même si elles sont en développement impropre au fil du temps parce que les autres méthodes venu performantes que les vieux mécanismes. À mon humble avis il serait mieux si il serait possible de marquer ces réponses telles que soit l'auteur, est notifié et peut réagir ou qu'une indication est donnée que la réponse pourrait être dépassée.
- Les réponses peuvent être dépassées, mais ce n'est aucune raison de priver l'auteur de crédit qu'ils ont gagné quand les réponses sont pertinentes. Je pense que ce qui suggère une fonctionnalité d'indicateur pour les anciennes réponses, c'est mieux que de descendre droit de vote ce qui était autrefois la bonne réponse.
- D'accord.
InformationsquelleAutor Ferdinand Beyer
5

HTML 5-compatible navigateurs proposent un méthode bind sur Function.prototype qui est probablement le plus propre de la syntaxe et n'est pas cadre-dépendante, même si elle n'est pas intégrée dans IE jusqu'à ce que IE 9. (Il y a un polyfill pour les navigateurs sans elle, si.)

Basé sur votre exemple, vous pouvez l'utiliser comme ceci:
```
jQuery('#available input', 
        this.controlDiv).bind('click', this.availableCategoryClick.bind(this));
```
(note de côté: la première bind dans cette déclaration fait partie de jQuery et n'a rien à voir avec Function.prototype.bind)

Ou à utiliser un peu plus concis et à jour de jQuery (et d'éviter toute confusion à partir de deux différents types de binds):
```
$('#available input', this.controlDiv).click(this.availableCategoryClick.bind(this));
```
InformationsquelleAutor JLRishe
4

vous pouvez utiliser le javascript lier méthode comme ceci:
```
var coolFunction = function(){
  //here whatever involving this
     alert(this.coolValue);
}

var object = {coolValue: "bla"};


$("#bla").bind('click', coolFunction.bind(object));
```
- Hélas, ce qui semble être uniquement en JS 1.8.5, et cette coupe des navigateurs tels que IE8.
- méthode de liaison est juste une partie du code js.. developer.mozilla.org/en-US/docs/JavaScript/Reference/...
- vous pouvez utiliser cette polyfill pour IE8
- Vous avez en effet raison. Je vais supprimer mon commentaire précédent maintenant.
InformationsquelleAutor Orlando
2

jQuery ne prend pas en charge les lie et le meilleur moyen est d'utiliser des fonctions.

Parce qu'en Javascript, ce.availableCategoryClick ne signifie pas l'appel de la availableCategoryClick la fonction de cet objet, jQuery vous conseillons d'utiliser cette syntaxe préférée:
```
var self = this;
jQuery('#available input', self.controlDiv).bind('click', function(event)
{
   self.availableCategoryClick(event);
});
```
Concepts OO en Javascript sont difficiles à comprendre, de la programmation fonctionnelle est souvent plus facile et plus lisible.

InformationsquelleAutor Vincent Robert
1

De voir que les fonctions de modifications de l'étendue, de la façon la plus commune est de le faire à la main, avec quelque chose comme var self = this.
```
var self = this

$('.some_selector').each(function(){
  //refer to 'self' here
}
```
InformationsquelleAutor August Lilleaas

Vous devez vous connecter pour publier un commentaire.