Eventos para cambios de visibilidad en JQuery

root — Thu, 06 Jul 2017 21:02:37 +0000

Eventos para cambios de visibilidad en JQuery

Jueves, Julio 6, 2017 - 23:02

Este artículo es básicamente una traducción de este original en inglés:

http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

En un caso bastante particular necesitaba detectar si cambiaba la visibilidad de un elemento del DOM que venia de una librería externa de JS. Después de dar algunas vueltas encontré una solución bastante elegante, publicada hace bastante tiempo. No he visto nada parecido en castellano, y hay algunos hilos en Stackoverflow, pero con soluciones bastante extrañas, así que lo publicaré aquí.

Con este bloque de código Javascript podemos registrar los eventos 'hide' y 'show' con la función .on() de JQuery como hacemos con cualquiera de los eventos estándar, de forma que podemos ejecutar nuestro código cuando se produzcan.

(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);

Una vez incluyamos este código, podemos registar los eventos usando un selector, de la manera tradicional:

$('#foo').on('show', function() {
      console.log('#foo es visible');
});

$('#foo').on('hide', function() {
      console.log('#foo esta oculto');
});

El código del ejemplo completo sería algo así.

Código HTML

<button id="btnMostrar">Mostrar</button>
<button id="btnOcultar">Ocultar</button>
<div class="contenedor">
<div id="foo">
    Elemento #foo
</div>
</div>
<div id="console">
</div>

Código CSS

.contenedor {
    height:60px;
    margin:10px;
}
#foo {
    background-color:#eeeeee;
    width:150px;
    height:50px;
    text-align:center;
    font-size:20px;
}

Código Javascript

// Codigo para registrar eventos hide y show
(function ($) {
    $.each(['show', 'hide'], function (i, ev) {
      var el = $.fn[ev];
      $.fn[ev] = function () {
        this.trigger(ev);
        return el.apply(this, arguments);
      };
    });
  })(jQuery);



// Mostrar elemento #foo al hacer click en el boton mostrar
$('#btnMostrar').click(function(){
   $('#foo').show();
});

// Ocultar elemento #foo al hacer click el boton ocular
$('#btnOcultar').click(function(){
   $('#foo').hide();
});

// Añadimos evento para imprimir un mensaje al mostrar #foo
$('#foo').on('show', function(){
    $('#console').html( $('#console').html() + '#foo es visible'+ '<br>'  )
});

// Añadimos evento para imprimir un mensaje al ocultar #foo
$('#foo').on('hide', function(){  
  $('#console').html( $('#console').html() + '#foo esta oculto'+ '<br>'  )
});

Ejemplo

Yo soy #foo

JQuery

Eventos para cambios de visibilidad en JQuery

Eventos para cambios de visibilidad en JQuery

Código HTML

Código CSS

Código Javascript

Ejemplo​

Añadir nuevo comentario

Ejemplo