jQuery callbacks.fireWith() Method

Last Updated : 10 Jul, 2020

The callbacks.fireWith() method in jQuery is used to call all the callbacks which are currently in the list with the given context and parameters.

Syntax:

callbacks.fireWith([context][, params])

Parameters:

context: This parameter defines the reference to the context in which the callbacks in the list should be fired.
params: This parameter is an array or array-like object of parameters to be passed to the callbacks in the list. If not used or undefined, no parameters will be passed.

Return Value: This method returns the callback object onto which it is attached.

Example 1: This example uses the context ‘window’ and passes the parameter to the function.

<!DOCTYPE HTML>
<html>
  
<head>
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
      
    <p>
        JQuery | callbacks.fireWith() method
    </p>
      
    <button onclick="Geeks();">
        click here
    </button>
      
    <p id="GFG_DOWN"></p>
      
    <script>
        var el_down = document.getElementById("GFG_DOWN");
  
        var res = "";
        var callbacks = jQuery.Callbacks();
  
        function Geeks() {
  
            // First function to be added to the list
            var func = function (val) {
                res = res + "value passed is - " + val;
            };
  
            // Add the function func to
            // the callbacks list
            callbacks.add(func);
  
            // Fire the callbacks on the list
            // using the context "window"
            // and an parameters array
            callbacks.fireWith(window, ["gfg_1"]);
            el_down.innerHTML = res;
        } 
    </script>
</body>
  
</html> 

Output:

Example 2: This example uses the context ‘window’ and passes the 2 parameter to the function.

<!DOCTYPE HTML>
<html>
  
<head>
    <script src=
"https://code.jquery.com/jquery-3.5.0.js">
    </script>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
      
    <p>
        JQuery | callbacks.fireWith() method
    </p>
      
    <button onclick="Geeks();">
        click here
    </button>
      
    <p id="GFG_DOWN"></p>
  
    <script>
        var el_down = document.getElementById("GFG_DOWN");
        var res = "";
        var callbacks = jQuery.Callbacks();
  
        function Geeks() {
  
            // first function to be added to the list
            var func = function (val_1, val_2) {
                res = res + "values passed are - "
                        + val_1 + ", " + val_2;
            };
  
            // Add the function func to
            // the callbacks list
            callbacks.add(func);
  
            // Fire the callbacks on the
            // list using the context "window"
            // and an parameters array
            callbacks.fireWith(window, ["gfg_1", "gfg_2"]);
            el_down.innerHTML = res;
        } 
    </script>
</body>
  
</html>

Output:

My Personal Notes

Related Articles