jQuery | $.proxy() Method

The $.proxy() Method in jQuery accepts an existing function and returns a new one with a particular context. Generally, it is used for attaching events to an element where the context is pointing back to a different object.

Syntax:

  • $(selector).proxy(function, context)
  • $(selector).proxy(context, name)

Parameter: This method accepts three parameters as mentioned above and described below:

  • function: It holds the existing function name which is to be called.
  • context: It shows the name of the object where the function lies.
  • name: The function whose context is to be changed.

Example 1: This example displays the context of h3 element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery $.proxy() Method
    </title>
      
    <script src=
    </script>
      
    <script>
        $(document).ready(function() {
           
            test = function() {
                this.txt = "Property of Object";
                $("h3").click($.proxy(this.myClick, this));
            };
               
            test.prototype.myClick = function(event) {
                alert(this.txt);
                alert(event.currentTarget.nodeName);
            };
               
            var x = new test();
           
        });
    </script>
</head>
  
<body style="text-align:center;">
   
    <h1>Welcome to GeeksforGeeks!.</h1
      
    <div style="background-color:green">
        <h3>Geeks for Geeks.</h3>    
    </div>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the heading text h3:
  • After clicking on the heading text h3:
  • Click on OK button:

Example 2: This example call the objPerson object and display its content.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
     <title>
        jQuery $.proxy() Method
     </title>
       
    <script src=
    </script>
      
    <!-- Script to illustrate $.proxy() Method -->
    <script>
        $(document).ready(function(){
            var objPerson = {
                test: function() {
                    $("h2").after("GeeksforGeeks");
                }
            };
          
            $("button").click($.proxy(objPerson, "test"));
        });
    </script>
</head>
  
<body style="text-align:center;">
  
    <h1>Welcome to GeeksforGeeks!.</h1
      
    <div style="background-color:green">
        <button>The $.proxy Method.</button>        
        <h2></h2>  
    </div>
</body>
  
</html>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.