jQuery $.proxy() method

The $.proxy() method takes an existing function and returns a new one that has a specific context. It is generally used to attach events to an element where the context points back to a different object.

Syntax

We can use the below syntaxes for using the $.proxy() method.

$(selector).proxy(function, context)
//or
$(selector).proxy(context, name)

The $.proxy() method accepts some parameters that are defined as follows -

function: It specifies the existing function to be called.

context: It is the object name where function lies.

name: It is the function name whose context is to be changed. It should be a property of the context object.

Now, let's see some of the illustrations of using the $.proxy() method.

Example1

In this example, we are using the function and context parameters of the $.proxy() method. Here, the context of the span element will be displayed.

<!DOCTYPE html>
<html>

<head>
<title> jQuery $.proxy() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
myTest = function() {
$("span").click($.proxy(this.demoClick, this));
};

myTest.prototype.demoClick = function(e) {
alert(e.currentTarget.nodeName);
};
var i = new myTest();
});
</script>
</head>

<body>
<h3> It is an example of using the $.proxy() method. </h3>
<div> Click the below text to see the effect </div>
</br>
<span> Click me </span>
</body>

</html>

Test it Now

Output

After the successful execution, the output will be -

After clicking the text Click me, the output will be -

Example2

In this example we are using the context, and name parameters of the $.proxy() method.

<!DOCTYPE html>
<html>

<head>
<title> jQuery $.proxy() method </title>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<script>
$(document).ready(function() {
var student = {
name: "John",
age: 23,
rollno: 11,
standard: "Post-Graduate",
demo: function(){
$("p").append("Name: " + this.name + "<br> Age: " + this.age + "<br> Roll.no: " + this.rollno + "<br> Standard: " + this.standard);
} 
};
$("button").click($.proxy(student, "demo"));
});
</script>
</head>

<body>
<h3> It is an example of using the $.proxy() method. </h3>
<div> Click the below button to see the effect </div>
</br>
<button> Click me </button>
<p></p>
</body>

</html>

Test it Now

Output