Las funciones de jQuery bind() y unbind() quedaron obsoletas en la versión 1.7 de jQuery. Estas funciones asignan y eliminan eventos en los elementos del DOM.
En este post vamos a ver su sintaxis y ejemplos para sustituirlas por las funciones on() y off() que son las validas a partir de la 1.7.
Este mismo caso ocurre con las funciones delegate() – undelegate() y live() – die().
Os recomiendo leer el post ‘jQuery on() y off(): Asignar de eventos a elementos del DOM‘ para ver el potencial de estas 2 funciones.
Con bind() podemos asignar por defecto eventos a los diferentes elementos que tenemos en el DOM. De esta manera podemos detectar una acción en nuestra web y desencadenar una serie de funciones.
Vamos con las diferentes sintaxis que podemos usar extraídas de su web oficial:
//un evento $(selector).bind(evento,funcion)
Esta primera sintaxis es la más común y sencilla, solo controlamos un evento y le asignamos una función, os los explico:
//varios eventos $(selector).bind(evento1 evento2 evento3 ...,funcion)
Con esta otra sintaxis podemos controlar varios eventos en un elemento y asignarle una función, los diferentes eventos se tienen que separar con un espacio. Os lo resumo:
//mapeo de eventos $(selector).bind(evento,funcion,mapeos)
Esta última sintaxis es la más peculiar, se mapean varios eventos con diferentes funciones, todas ellas sobre el mismo elemento.
Con unbind() eliminamos las asignaciones previas de eventos en los elementos de DOM. Vamos a ver sus diferentes sintaxis extraídas de su web oficial.
$(selector).unbind()
Con la sintaxis superior eliminamos todas las asignaciones de eventos que tenga un elemento.
$(selector).unbind(evento)
Con esta sintaxis podemos eliminar uno de los eventos asignados a un elemento.
$(selector).unbind(evento, funcion)
Con esta tercera sintaxis además de eliminar un evento podemos asignarle una función:
En este primer ejemplo de jQuery bind() vamos a asignar un evento a un elemento del DOM y ver su equivalente con la función on().
$(document).ready(function(){ $("#boton").bind("click",function(){ alert('Has hecho click en el botón del ejemplo de jQuery bind()'); }); $("#boton2").on("click",function(){ alert('Has hecho click en el botón del ejemplo de jQuery on()'); }); });
Os explico el código superior:
El código HTML de los botones es el siguiente:
<input type="button" name="boton" id="boton" value="Clíckame"> <input type="button" name="boton2" id="boton2" value="Clíckame">
Segundo ejemplo para asignar varios eventos a un mismo elemento y ejemplo equivalente con on().
$(document).ready(function(){ $("#boton").bind("click dblclick",function(){ alert('Has hecho click en el botón del ejemplo de jQuery bind()'); }); $("#boton2").on("click dblclick",function(){ alert('Has hecho click en el botón del ejemplo de jQuery on()'); }); });
Os explico el código superior, es casi idéntico que el primer ejemplo:
El código HTML de los botones es el mismo del ejemplo anterior.
Tercer y último ejemplo para ver funcionando el mapeo de eventos sobre un elemento y ejemplo equivalente con jQuery on():
$(document).ready(function(){ $("#boton").bind({ click:function(){alert('Has hecho click en el botón del ejemplo bind()');}, mouseover:function(){alert('Has pasado el ratón por encima del botón del ejemplo bind()');} }); $("#boton2").on({ click:function(){alert('Has hecho click en el botón en el ejemplo de on()');}, mouseover:function(){alert('Has pasado el ratón por encima del botón en el ejemplo de on()');} }); });
Os explico el código superior:
Si os fijáis, la función on() es casi similar a bind(), solo cambia el nombre de la función, sería sencilla una migración…
El código HTML de los botones es el mismo de los ejemplos anteriores.
Ya solo nos queda repasar la eliminación de los eventos asignados a eventos, tomamos como base de ejemplo el código del ejemplo 2:
$(document).ready(function(){ $("#boton").bind("click dblclick",function(){ alert('Has hecho click en el botón'); }); });
Su equivalente en off() sería así:
$(document).ready(function(){ $("#boton").off("click dblclick",function(){ alert('Has hecho click en el botón'); }); });
La eliminación de todos los eventos sería así:
$("#boton").unbind() //equivalente en off() $("#boton").off();
Y la eliminación de un solo evento, por ejemplo la del evento click sería así:
$("#boton").unbind("click") //equivalente off() $("#boton").off("click");
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: