Comment différencier plusieurs instances de la même méthode liée à un événement?

Question

Dites que vous avez une classe Foo et que plusieurs objets de cette classe ont leur méthode bar() liée à l'événement click d'un élément (voir l'extrait de code ci-dessous). Après avoir cliqué sur cet élément, je me attends à la console pour afficher les éléments suivants:

name: a 
name: b 
name: c 

Mais seule la dernière méthode de l'objet bar() est appelé:

name: c 

Pourquoi est-ce? Pourquoi les autres ne sont-ils pas appelés? Je suppose que c'est à cause de $.off(), et si c'est le cas, existe-t-il un moyen de différencier entre appeler $.off() et $.on() pour la méthode bar() de chaque objet?

function Foo(name) { 
 
    this.name = name; 
 
}; 
 

 
Foo.prototype.bar = function (e) { 
 
    var foo = e.data.foo; 
 
    console.log("name:", foo.name); 
 
} 
 

 
$.each(["a","b","c"], function (index, value) { 
 
    var $elem = $("#button-test"); 
 
    var obj = new Foo(value); 
 

 
    $elem.off("click", obj.bar); // To ensure each object's method isn't bound multiple times 
 
    $elem.on("click", { foo: obj }, obj.bar); 
 
});

<button id="button-test" type="button">Test</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

J'ai trouvé la solution à l'aide obj.bar.bind(obj):

function Foo(name) { 
 
    this.name = name; 
 
}; 
 

 
Foo.prototype.bar = function() { 
 
    console.log("name:", this.name); 
 
} 
 

 
$.each(["a","b","c"], function (index, value) { 
 
    var $elem = $("#button-test"); 
 
    var obj = new Foo(value); 
 
    var barEvent = obj.bar.bind(obj); // Added this 
 
    $elem.off("click", barEvent); // To ensure each object's method isn't bound multiple times 
 
    $elem.on("click", barEvent); 
 
});

<button id="button-test" type="button">Test</button> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>