El método delegado() en jQuery se usa para agregar uno o más controladores de eventos al elemento especificado que son elementos secundarios de los elementos seleccionados y también se usan para especificar una función para ejecutar cada vez que ocurra el evento.
Sintaxis
$(selector).delegate( childSelector, event, data, function )
Parámetro: este método acepta cuatro parámetros, como se mencionó anteriormente y se describe a continuación:
- childSelector: es un parámetro obligatorio y se usa para especificar uno o más elementos secundarios adjuntos al controlador de eventos.
- evento: Es un parámetro obligatorio y se usa para especificar uno o más eventos adjuntos a los elementos. Los valores de eventos múltiples están separados por espacios y debe ser un evento válido.
- datos: es un parámetro opcional y se utiliza para especificar los datos adicionales para pasar a lo largo de la función.
- función: Es un parámetro obligatorio y se usa para especificar la función que se ejecutará cuando ocurra el evento.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
delegate() Method in jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery script to add events -->
<script>
$(document).ready(function() {
$("div").delegate("h3", "click", function() {
$("h3").css("background-color", "green");
});
});
</script>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks!</h1>
<p>
Click on the below element (lightgreen
background) to change background-color
</p>
<div style="background-color:lightgreen;">
<h3>GeeksForGeeks</h3>
</div>
<h3>GeeksForGeeks.</h3>
</center>
</body>
</html>
Salida:
Antes Haga clic en el elemento: 
Después Haga clic en el elemento:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
delegate() Method in jQuery
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- jQuery script for delegate() method -->
<script>
$(document).ready(function(){
$("div").delegate("h3", "click", function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<h3>This show how the delegate Method"
+ " works .</h3>").insertAfter("button");
});
});
</script>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks!.</h1>
<div style="background-color:green">
<h3>GeeksforGeeks.</h3>
<h3>The delegate Method.</h3>
<button>Click</button>
</div>
</center>
</body>
</html>
Salida:
Antes Haga clic en el botón: 
Después Haga clic en el botón:
Publicación traducida automáticamente
Artículo escrito por AdeshSingh1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA