jQuery callbacks.add() Method
Last Updated :
23 Jul, 2024
Improve
The jQuery callbacks.add() method is used to add a callback or a collection of callbacks to a callback list. This method returns the callback object onto which it is attached (this).
Syntax:
callbacks.add(callbacks)
Parameters:
- callbacks: This parameter holds a function, or an array of functions, that are to be added to the callback list.
Example 1: This method adds a method fun1() to the callback and call it.
<!DOCTYPE HTML>
<html>
<head>
<title>
jQuery callbacks.add() method
</title>
<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 id="GFG_UP"></p>
<button onclick="Geeks();">
click here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"JQuery | callbacks.add() method";
var res = "";
function Geeks() {
// First function to be added to the list
var fun1 = function (val) {
res = res + "This is function 1 and"
+ " value passed is " + val + "<br>";
};
var callbacks = jQuery.Callbacks();
callbacks.add(fun1); //Adding the func1
callbacks.fire("GFG_1"); // Calling the fun1
el_down.innerHTML = res;
}
</script>
</body>
</html>
<html><head> <title> jQuery callbacks.add() method </title> <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 id="GFG_UP"></p> <button onclick="Geeks();"> click here </button> <p id="GFG_DOWN"></p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "JQuery | callbacks.add() method"; var res = ""; function Geeks() { // First function to be added to the list var fun1 = function (val) { res = res + "This is function 1 and" + " value passed is " + val + "<br>"; }; var callbacks = jQuery.Callbacks(); callbacks.add(fun1); //Adding the func1 callbacks.fire("GFG_1"); // Calling the fun1 el_down.innerHTML = res; } </script></body></html>Output:
Example 2: This example adds method fun1() and fun2() to the callbacks and then calls them. Notice that at second time the fire() method is called, it calls both the functions with the same argument 'GFG_2'.
<!DOCTYPE HTML>
<html>
<head>
<title>
jQuery callbacks.add() method
</title>
<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 id="GFG_UP"></p>
<button onclick="Geeks();">
click here
</button>
<p id="GFG_DOWN"></p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML =
"JQuery | callbacks.add() method";
var res = "";
function Geeks() {
// First function to be added to the list
var fun1 = function (val) {
res = res + "This is function 1 and"
+ " value passed is " + val + "<br>";
};
// Second function to be added to the list
var fun2 = function (val) {
res = res + "This is function 2 and "
+ "value passed is" + val + "<br>";
};
var callbacks = jQuery.Callbacks();
// Adding the function 1
callbacks.add(fun1);
// Calling the function 1
callbacks.fire("GFG_1");
// Adding the function 2
callbacks.add(fun2);
// Calling the function 2
callbacks.fire("GFG_2");
// res of the both functions
el_down.innerHTML = res;
}
</script>
</body>
</html
<html><head> <title> jQuery callbacks.add() method </title> <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 id="GFG_UP"></p> <button onclick="Geeks();"> click here </button> <p id="GFG_DOWN"></p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "JQuery | callbacks.add() method"; var res = ""; function Geeks() { // First function to be added to the list var fun1 = function (val) { res = res + "This is function 1 and" + " value passed is " + val + "<br>"; }; // Second function to be added to the list var fun2 = function (val) { res = res + "This is function 2 and " + "value passed is" + val + "<br>"; }; var callbacks = jQuery.Callbacks(); // Adding the function 1 callbacks.add(fun1); // Calling the function 1 callbacks.fire("GFG_1"); // Adding the function 2 callbacks.add(fun2); // Calling the function 2 callbacks.fire("GFG_2"); // res of the both functions el_down.innerHTML = res; } </script></body></htmlOutput:
