jQuery - utilisation de $ (this) dans une fonction personnalisée

Question

J'essaie de créer une fonction personnalisée qui dissocie puis lie un événement. Il ressemble à ceci:

App.bindEvent = function(selector, eventType, eventHandler) { 
    $(selector).unbind(eventType); 
    $(selector).bind(eventType, function(event) { 
     eventHandler(event); 
    }); 
}; 

Cependant, le problème que je suis confronté est que je ne peux pas utiliser le mot-clé ce pour référencer l'élément DOM qui a été cliqué. Par exemple, je ne peux pas le faire:

App.bindEvent("#my-element", "click", function() { 
    var myId = $(this).attr("data-my-id"); 
}); 

Comment puis-je obtenir le ce mot-clé pour pointer vers l'élément DOM cliqué comme il le fait dans jQuery.bind()?

Merci pour toute aide.

Answer 1

Change:

eventHandler(event); 

Pour:

eventHandler.call(this, event); 

Cela va changer la "portée" de votre fonction pour être le même que la portée de l'appel "bind" d'origine.

Answer 2

Vous devez call le gestionnaire dans le cadre de l'objet:

eventHandler.call(this, event); 

Answer 3

Que diriez-vous plutôt:

App.bindEvent = function(selector, eventType, eventHandler) { 
    var element = this; 

    $(selector).unbind(eventType); 
    $(selector).bind(eventType, function(event) { 
     eventHandler.call(element, event); 
    }); 
}; 

Answer 4

Je pense que vous essayez de se référer à

event.target 

Par exemple:

App.bindEvent("#my-element", "click", function(event) { 
    var myId = $(event.target).attr("data-my-id"); 
}); 

départ jquery's event documentation