Eliminar evento onChange de un select con JQuery
En el siguiente tutorial aprenderemos cómo eliminar un evento de change de un elemento select sin afectar al evento predeterminado del elemento.
Evento change de elementos select
Los elementos select tienen definidos por defecto una serie de eventos propios para que realicen una serie de acciones predeterminadas. Por ejemplo al pulsar espacio se despliega, al pulsar enter se selecciona, etc.
Si añadimos un evento change a un select, podremos personalizar el comportamiento en el momento en el que se selecciona una opción.
Veamos un ejemplo
<!-- Elemento select -->
<select class="select-elem"></select>
<script>
// Añadimos un evento change al elemento
// para que cuando se cambie la opción seleccionada ejecute un console.log
$(".select-elem").change(function(){
console.log("El select ha cambiado");
});
</script>
Como ya hemos visto, podemos añadir un evento change a un select para personalizar qué queremos que haga cuando el elemento cambie.
Eliminar eventos con unbind
Para eliminar eventos de un elemento podemos hacerlo utilizando el método unbind, pero hay que tener cuidado cuando el unbind lo hacemos sobre un elemento select.
Normalmente, el método unbind lo usamos para eliminar un evento y que éste no se repita.
Veamos un ejemplo de repetición de evento con un select
<!-- Elemento select -->
<select class="select-elem"></select>
<script>
// Método que añade el evento
function addEventSelectElem(){
$(".select-elem").change(function(){
console.log("El select ha cambiado");
});
}
// Si llamamos varias veces al método addEventSelectElem el evento se duplica
addEventSelectElem();
addEventSelectElem();
// Y lo que sucede en este caso es que el console.log
// se repetirá tantas veces como hemos llamado al método
// en el momento que el select cambie.
</script>
El problema con los elementos select es que si utilizamos el método unbind directamente, se perderá la funcionalidad predeterminada del select.
Ejemplo de unbind sobre un elemento select
<!-- Elemento select -->
<select class="select-elem"></select>
<script>
// Método que añade el evento
function addEventSelectElem(){
// Eliminamos el evento antes de generarlo
$("select-elem").unbind("change");
$(".select-elem").change(function(){
console.log("El select ha cambiado");
});
}
// Si llamamos varias veces al método addEventSelectElem ya no se duplicará
addEventSelectElem();
addEventSelectElem();
// Pero habremos perdido la funcionalidad predeterminada del Elemento
// Esto puede causar que no funcione correctamente
</script>
Eliminar función de un evento con unbind
Para solucionar este problema que planteamos, lo ideal es utilizar una función dentro del código del evento change y hacer unbind sobre dicha función y no sobre el propio evento.
Veamos un ejemplo
<!-- Elemento select -->
<select class="select-elem"></select>
<script>
// Método que añade el evento
function addEventSelectElem(){
// El unbind lo hacemos sobre el método changeSelectElem del evento change
$("select-elem").unbind("change", changeSelectElem);
$(".select-elem").change(function(){
changeSelectElem();
});
}
function changeSelectElem(){
console.log("El select ha cambiado");
}
// Si llamamos varias veces al método addEventSelectElem ya no se duplicará
addEventSelectElem();
addEventSelectElem();
// Y tampoco se perderá la funcionalidad predeterminada del elemento select
</script>
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo