Antes de ver las diferencias entre los métodos jQuery live() y bind() , comprendamos brevemente ambos métodos.
live(): este método se usa para adjuntar uno o más controladores de eventos al elemento seleccionado. Especificamos una función para cada evento para que cuando ocurra ese evento, se ejecute la función asociada. Este método también funciona para elementos futuros. Entenderemos esto cuando discutamos la diferencia entre estos dos métodos.
Sintaxis:
$(selector).live(event,function)
Parámetros:
- evento: Especifica el evento que desea adjuntar con el selector.
- función : Es la función que se ejecutará cuando ocurra un evento en particular.
Ejemplo: estamos adjuntando un evento de clic a la etiqueta «p» . Y cuando hacemos clic en cualquier etiqueta «p» , la función asociada con el evento de clic se ejecuta y el color de todas las etiquetas «p» cambia a rojo.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript">
</script>
</head>
<body>
<div class="a">
<p>Hello geeks</p>
<div class="b">
<p>Hey Geeks</p>
</div>
<p>Hello geeks</p>
</div>
<script>
$('p').live('click',function () {
$("p").css('color','red')
})
</script>
</body>
</html>
Producción:
método en vivo()
Nota: Este método se eliminó en la versión jQuery 1.9, utilice el método on() .
bind(): este método también se usa para adjuntar un evento a un selector y especificar una función que se ejecutará cuando ocurra el evento. Este método solo funciona para el elemento presente.
Sintaxis:
$(selector).bind(event,function)
Parámetro:
- evento: Especifica el evento que desea adjuntar con el selector.
- función: Especifica la función que se ejecutará cuando ocurra el evento en particular.
Ejemplo: El siguiente ejemplo solo demuestra el método bind() y su ejecución.
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript">
</script>
</head>
<body>
<h1>Hello Geeks</h1>
<script>
$('h1').bind('click',function () {
$("h1").css('color','blue')
})
</script>
</body>
</html>
Producción:
ejemplo de enlace simple()
Diferencia entre los métodos live() y bind(): Tanto el método live() como el bind() son casi iguales. Ambos se utilizan para adjuntar eventos al elemento. En el método live() , los controladores de eventos se adjuntan al elemento y funcionarán tanto para el presente como para los elementos futuros.
Explicación: supongamos que tenemos una sola etiqueta «p» en nuestra página y le hemos adjuntado un evento de clic. Ahora cada vez que hagamos clic en la etiqueta «p», se ejecutará la función asociada. Si agregamos otra etiqueta «p» a nuestro HTML usando el método append() y ahora si hacemos clic en esta etiqueta «p», se produce el evento y se ejecutará la función asociada. Significa que el método live() también funciona para elementos futuros.
Por otro lado, el método bind() solo funciona para el elemento presente.
Explicación: tenemos una etiqueta «p» y hemos adjuntado un evento de clic en esta etiqueta de los métodos live() y bind() .
También estamos agregando otra etiqueta «p» a nuestra página en tiempo de ejecución (futura etiqueta «p»). Cuando hacemos clic en la primera etiqueta «p», vemos dos cuadros de alerta, uno de ambos métodos. Pero cuando hacemos clic en la etiqueta futura «p», solo se ejecuta el método live() porque el método bind() no funciona para elementos futuros.
Ejemplo:
HTML
<!DOCTYPE html>
<head>
<!-- jQuery library -->
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript">
</script>
</head>
<body>
<p>Hello</p>
<script>
$('p').live('click',function () {
alert('live')
})
$('p').bind('click',function () {
alert('bind')
})
$('body').append('
<p>Future p tag</p>
')
</script>
</body>
</html>
Producción:
Veamos las diferencias en forma tabular -:
| Método en vivo() | método bind() | |
| 1. | El método live() se usa para adjuntar uno o más controladores de eventos para elementos seleccionados | El método bind() es útil para adjuntar uno o más controladores de eventos para elementos seleccionados |
| 2. | Es útil especificar una función para ejecutar cuando ocurren los eventos. | Se utiliza para especificar una función para ejecutar cuando se produce el evento. |
| 3. |
Su sintaxis es -: $(selector).live(evento,datos,función) |
Su sintaxis es -: $(selector).bind(evento,datos,función,mapa) |
| 4. | Toma dos parámetros función y evento. | Toma dos parámetros un evento y una función |
| 5. | Se introdujo por primera vez en jQuery versión 1.7. | Se introdujo por primera vez en JQuery versión 3.0 |