jQuery.proxy()
jQuery.proxy( function, context ) Returns: Function
Description: Takes a function and returns a new one that will always have a particular context.
-
version added: 1.4jQuery.proxy( function, context )
functionThe function whose context will be changed.
contextThe object to which the context (
this) of the function should be set. -
version added: 1.4jQuery.proxy( context, name )
contextThe object to which the context of the function should be set.
nameThe name of the function whose context will be changed (should be a property of the
contextobject).
This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function if passed the original.
Be aware, however, that jQuery's event binding subsystem assigns a unique id to each event handling function in order to track it when it is used to specify the function to be unbound. The function represented by jQuery.proxy() is seen as a single function by the event subsystem, even when it is used to bind different contexts. To avoid unbinding the wrong handler, use a unique event namespace for binding and unbinding (e.g., "click.myproxy1") rather than specifying the proxied function during unbinding.
Examples:
Example: Change the context of functions bound to a click handler using the "function, context" signature. Unbind the first handler after first click.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button type="button" id="test">Test</button></p>
<div id="log"></div>
<script>
var me = {
type: "zombie",
test: function(event) {
// Without proxy, `this` would refer to the event target
// use event.target to reference that element.
var element = event.target;
$(element).css("background-color", "red");
// With proxy, `this` refers to the me object encapsulating
// this function.
$("#log").append( "Hello " + this.type + "<br>" );
$("#test").unbind("click", this.test);
}
};
var you = {
type: "person",
test: function(event) {
$("#log").append( this.type + " " );
}
};
// execute you.test() in the context of the `you` object
// no matter where it is called
// i.e. the `this` keyword will refer to `you`
var youClick = $.proxy( you.test, you );
// attach click handlers to #test
$("#test")
// this === "zombie"; handler unbound after first click
.click( $.proxy( me.test, me ) )
// this === "person"
.click( youClick )
// this === "zombie"
.click( $.proxy( you.test, me ) )
// this === "<button> element"
.click( you.test );
</script>
</body>
</html>Demo:
Example: Enforce the context of the function using the "context, function name" signature. Unbind the handler after first click.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><button id="test">Test</button></p>
<p id="log"></p>
<script>
var obj = {
name: "John",
test: function() {
$("#log").append( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) );
</script>
</body>
</html>