Las siguientes funciones de controlador de eventos de jQuery se utilizan básicamente para adjuntar eventos a elementos o selectores, pero son muy diferentes entre sí. Antes de convertir jQuery live() en la función on() , aprendamos primero sobre los controladores de eventos y sus diferencias.
jQuery live():
esta función jQuery adjunta un controlador de función para todos los elementos que coincide con el selector dado en el elemento actual, así como en el futuro o siempre que se agregue algún contenido dinámicamente a la página. Esta función adjunta el controlador de función al documento raíz junto con el selector y los datos proporcionados. Se introdujo en jQuery 1.3 y superior.
Después de jQuery-versión 1.4, proporcionó soporte para todos los eventos.
Anteriormente, solo admitía algunos eventos como hacer clic, hacer doble clic, bajar el mouse, subir el mouse, pasar el mouse, alejar el mouse, presionar la tecla, presionar la tecla.
Sintaxis:
$( selector ).live( events, data, function handler);
- events : Uno o varios eventos separados por espacios, adjuntos al selector.
- data : parámetro de datos opcional pasado al controlador de función.
- manejador de función: Función que se ejecuta cada vez que ocurre el evento.
Nota: Utiliza el concepto de delegación de eventos y burbujeo de eventos.
Fragmento de código :
$( "#container a" ).live( "click", function() {
// some response code to the event
alert( "GeeksforGeeks" );
});
El controlador de función estaba vinculado a la raíz del documento junto con el selector y el evento de clic .
Cuando el usuario hace clic en el elemento ancla, el evento se activa en la raíz del documento y coincide con #container a y luego ejecuta la función de evento de clic .
Usando jQuery live() en un sitio web dinámico, el programador no necesita preocuparse por actualizar los controladores de eventos.
Funciona tanto para elementos existentes como futuros.
Fragmento de código :
$('a').live('click', function() {
alert("GeeksforGeeks")
});
La función de alerta se adjunta al documento junto con el evento de clic y como parámetros.
Cada vez que se envía un evento al documento raíz, jQuery verifica el evento de clic y también verifica el selector de CSS a .
Si se cumplen ambas condiciones, entonces el código dentro del controlador se ejecuta de manera efectiva, lo que hace que la función sea muy inflexible.
$( "a" ).live( "click", function( event ) {
// It cancels the default action by this method.
event.preventDefault();
});
Ejemplo 1:
En el siguiente ejemplo, el evento «clic» se adjunta con una «p» dada usando este método.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").live("click", function() {
$("p").slideToggle();
});
});
$('body').append(
'
<p>Adding dynamic items to test live function</p>
');
</script>
</head>
<body>
<p>Geeks for Geeks</p>
<button>Press</button>
<br>
<br>
<div><b><h4>Clicking on the 'Press'
button will execute the live method().
</h4></b> </div>
</body>
</html>
Salida:
Después de hacer clic en el botón «pulsar», se muestra lo siguiente:
Salida:
Ejemplo 2:
En el siguiente ejemplo, el evento «clic» se adjunta con una «p» dada y otro botón, utilizando este método.
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("#pressbutton").live("click", function() {
$("p").slideToggle();
});
$("#insertbutton").click(function() {
$("
<p>Inserted Element</p>
").insertAfter(
"#insertbutton");
});
});
</script>
</head>
<body>
<p>Geeks for Geeks</p>
<button id="pressbutton">Press to toggle</button>
<br>
<br>
<button id="insertbutton">Click to insert an element</button>
</body>
</html>
Salida: 
Ejemplo 3:
En el siguiente ejemplo, el evento «clic» se adjunta con la clase «div», usando este método.
<!DOCTYPE html>
<html>
<head>
<title>jQuery live() method</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('div').live('click', function( event ){
alert('GeeksforGeeks');
});
});
</script>
<style>
.div{
width: 50px;
height: 50px;
margin: 10px;
float: left;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>Click on any square to see the output:</p>
<div class="div" style="background-color:#99f;"></div>
<div class="div" style="background-color:#8f8;"></div>
<div class="div" style="background-color:orange;"></div>
</body>
</html>
Salida: 
Nota: Esta función quedó obsoleta en jQuery 1.7 y finalmente se eliminó en jQuery 1.9 por algunas de sus lagunas. La función se reescribió, lo que comúnmente se conoce como jQuery on(), que es la preferida para la implementación.
Desventajas de usar jQuery live():
Analicemos algunas de las desventajas de la función jQuery .live(), por lo que quedó en desuso y se eliminó.
- Como el activador del evento se delega hasta la raíz del documento, el uso de event.stopPropagation()
no tiene sentido. - Antes de que se ejecuten los controladores de función, la función debe recorrer todo el camino hasta la raíz del
documento. - Por lo tanto, el rendimiento y la flexibilidad se ven afectados en el caso de un gran DOM y también
consumen mucho tiempo. - El uso de jQuery live() no admite el enstringmiento.
jQuery .on() :
esta función jQuery adjunta uno o más controladores de funciones que coinciden con el selector actual junto con todos los elementos secundarios. Los selectores presentes deben existir en la página en el momento del código que llama a jQuery on(). Esta función se introdujo en jQuery 1.7 y superior, para simplificar y fusionar todos los controladores de eventos anteriores, a saber, live(), bind(), delegar() en una función coherente.
Sintaxis:
$(selector).on(events, childSelector, data, function handler);
o
$( document ).on( events, selector, data, function handler );
- eventos : Uno o varios eventos separados por un espacio.
- selector : Selector o selector hijo que desenstring el evento.
- datos: datos que se pasarán al controlador de función.
- controlador de función: una función que se ejecuta en ese desenstringdor de eventos.
Fragmento de código:
$('#parentId').on('click', '#childId', function() {
// Code to be written
});
Nota: El controlador de función se llama cada vez que ocurre un evento en los elementos seleccionados.
Los eventos pueden ocurrir en el elemento del elemento secundario interno.
Ventajas de usar jQuery on() :
Veamos algunas de las ventajas de jQuery .on , ya que se usa sobre jQuery live()
- La función jQuery .on() es el reemplazo real de todas las funciones de vinculación de eventos como live(), bind() y
delegar(), lo que brinda mucha simplicidad y consistencia al código. - La función jQuery.on() puede adjuntar un controlador de eventos al objeto principal, que está mucho más cerca del objeto real
, lo que mejora el rendimiento de manera efectiva. - Esta función funciona bien con elementos actuales y futuros.
- Es una buena práctica usar jQuery on() incluso para elementos estáticos simples.
- Los controladores de eventos se ejecutan desde los elementos más internos a los más externos.
Fragmentos de código :
$("#container a").on("click", function () {
// some response code to the event
alert("GeeksforGeeks.");
});
$(document).on('click', '.selector', function() {
/* some response code to the event */
alert("GeeksforGeeks");
});
$("#dataTable tbody").on("click", "tr", function(event){
alert("GeeksforGeeks");
})
En el ejemplo anterior, jQuery vincula el evento «clic» al cuerpo de la tabla de datos.
Si se hace clic en el elemento secundario, el evento llegará al tbody debido al evento que se propaga hacia arriba.
Fragmento de código para el controlador de eventos:
function print_message() {
alert( "GeeksforGeeks" );
}
$( "button" ).on( "click", print_message );
Nota: En resumen, jQuery on() representa una forma simplificada de adjuntar controladores de eventos a los elementos.
Ejemplo 1:
este ejemplo muestra que el evento «clic» se adjunta al cuadrado «div» usando el método on().
<html>
<head>
<title>jQuery on() method</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('div').on('click', function( event ){
alert('GeeksforGeeks!');
});
});
</script>
<style>
.div {
width: 50px;
height: 50px;
margin: 10px;
float: left;
border: 2px solid black;
}
</style>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<p>Click on any square to see the output:</p>
<div class = "div" style = "background-color:#99f;"></div>
<div class = "div" style = "background-color:#8f8;"></div>
<div class = "div" style = "background-color:orange;"></div>
</body>
</html>
Producción :
Ejemplo 2:
Este ejemplo muestra que el evento «clic» se adjunta a «li» usando el método on().
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
li {
width:200px;
background: yellow;
cursor: pointer;
padding: 5px;
}
li.hover {
background: #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<ul>
<li class="active">Click me!</li>
</ul>
<span></span>
<script>
var count = 0;
$( "body" ).on( "click", "li", function() {
$( this ).after( "<li>Paragraph number : " + (++count) + "</li>" );
});
</script>
</body>
</html>
Producción:
Razones para la desaprobación de jQuery live():
- Es una mala práctica de programación aplicar todos los controladores de eventos .live() en todo el objeto del documento.
- En documentos muy grandes, ofrecía un rendimiento y una utilización de la memoria deficientes junto con un tiempo de respuesta lento.
- Como los controladores de eventos se adjuntan al elemento del documento, arrojaba resultados inesperados que reducían la eficiencia.
Convertir live() en on():
convertir live() en on() necesita delegación de eventos.
jQuery on() funciona mejor porque vincula el controlador de eventos directamente al elemento en lugar de a la raíz del documento.
jQuery adjunta el controlador de eventos al elemento ancestro más cercano y luego permite que surja del elemento secundario. Inicialmente, jQuery live() se usaba para adjuntar controladores de funciones a elementos que actualmente no están en el documento y pueden generarse dinámicamente.
Algunas de las delegaciones son las siguientes:
$('#container a').live('click', function(e) {
e.preventDefault();
alert('Anchor element is clicked');
});
Después de convertir live() en on() , el código se escribe de la siguiente manera:
$('#container').on('click', 'a', function(e) {
e.preventDefault();
alert('Anchor element is clicked');
});
$('button').live('click', execute);
function execute() {
// code for execution
}
Después de convertir live() en on() , el código anterior se escribe de la siguiente manera:
$(document).on('click', 'button', execute);
function execute() {
// code for execution
}
En el ejemplo anterior, jQuery on() se llama en el documento.
Pero el rendimiento es mejor si se elige algún elemento más cercano al selector en lugar del documento.
$( "#id" ).live( "click", function() {
alert("GeeksforGeeks live event .");
});
Después de convertir live() en on() , el código anterior se escribe de la siguiente manera:
$( "#id" ).on( "click", function() {
alert("GeeksforGeeks on event.");
});
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA