Updated April 10, 2023
Introduction to jQuery proxy
The jQuery proxy() function accepts an existing function and returns a new function with a specific context. This function is a built-in function in jQuery. It is mostly used to attach an event handler to an event where the context is pointing back to a different object and also if we bind the function returned from jQuery proxy() function the jQuery ensure that it will still unbind the correct function if original pass.
Syntax of jQuery proxy() Function
Given below is the syntax mentioned:
$( selector ). proxy( function, context );Or
$( selector ). proxy( context, name );Parameters:
- function: This is not an optional parameter. It specifies the existing function name whose context will be changed.
- context: This is not an optional parameter. It specifies the object name whose context of the function should be changed.
- name: This is not an optional parameter. It specifies the function name whose context will be changed that should be a property of the context object.
Return Value:
The return value of the function is a new function with a specified context.
Working
- The jQuery proxy() function accepts two parameters, the first parameter is the name of the function and the second parameter is the context for the function.
- Suppose we have an existing function myFun() whose context we want to set or change.
- So we can use the jQuery proxy() function as “$( “button” ).click($.proxy(myFun, this));”, where button is the selector element which is passing as the context to the myFun() function.
- The button selector will be used in the myFun() function based on the requirement.
Examples of jQuery proxy
Given below are the examples mentioned:
Example #1
Example of the jQuery proxy() function where the function name and context are passed as the parameter.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery proxy() function </title>
<style>
.rdmore .moretext{
display: none;
}
</style>
<script>
$(document).ready(function() {
myFun = function() {
// call an existing function with a this context
$( "button" ).click( $.proxy(this.button, this));
};
myFun.prototype.button = function(e) {
$( "#d1" ).text( e.currentTarget.nodeName );
};
var i = new myFun();
});
</script>
</head>
<body>
<h3> This an example of jQuery proxy() function : </h3>
<div> Click the below button to call an existing function with a context. </div>
</br>
<button> Click here </button>
<div id = "d1" style = "color : red;"> </div>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, click on the button it calls the proxy() function where to the proxy function the existing function name and context is passed to create the new function with the context as “$( “button” ).click( $.proxy( this.button, this));”. And the new function displaying the name of the element passed as the, as we can see in the above output.
Example #2
Example of the jQuery proxy() function where the context and name are passed as the parameter.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title> This is an example for jQuery proxy() function </title>
<script>
$( document ).ready( function() {
var obj = { sub1 : "JavaScript" ,
sub2 : "CSS" ,
sub3 : "jQuery" ,
sub4 : "Java",
myFun : function()
{
$( "#d1" ).append("The sub1 is : " + this.sub1 + "<br> The sub2 is : " + this.sub2 + "<br> The sub3 is : " + this.sub3 + "<br> The sub4 is : " + this.sub4);
}
} ;
// set the context for a function myFun
$( "button" ).click( $.proxy( obj, "myFun" ));
});
</script>
</head>
<body>
<h3> This an example of jQuery proxy() function : </h3>
<div> Click the below button to set the context for a function. </div>
</br>
<button> Click here </button>
<div id = "d1" style = "color : red;"> </div>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, click on the button it calls the proxy() function where to the proxy function the context and function name are passed to set the context of the function with the passed context as “$( “button” ).click( $.proxy( obj, “myFun” ));”. And the myFun() function displaying the context passed (object), as we can see in the above output.
Example #3
Example of the jQuery proxy() function where the function name and context are passed as the parameter.
Code:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<title> This is an example for jQuery proxy() function </title>
<script>
$(document).ready(function() {
myFun = function() {
this.property = "Property of Object";
$("h3").click($.proxy(this.myClick, this));
};
myFun.prototype.myClick = function(event) {
alert(this.property + "\n " + event.currentTarget.nodeName);
};
var x = new myFun();
});
</script>
</head>
<body>
<h3 style = "color : red;"> This an example of jQuery proxy() function : </h3>
<div> Click the above heading to call the function with context </div>
</br>
</body>
</html>Output:
Once we click on the button, the output is:
In the above code, click on the heading it calls the proxy() function where to the proxy function the function name and context are passed to set or create a new function with the context as $(“h3”).click($.proxy(this.myClick, this));”. And the myClick() function displaying the context passed (object and element name), as we can see in the above output.
Conclusion
The jQuery proxy() function is a built-in function, which accepts an existing function and returns a new function with a specific context.
Recommended Articles
This is a guide to jQuery proxy. Here we discuss the introduction, working of jQuery proxy() function and examples respectively. You may also have a look at the following articles to learn more –
