Cómo escribir el evento onshow usando javascript/jquery?

Question

Tengo una etiqueta de anclaje en mi página, quiero un evento adjunto, que se activará cuando cambie la visualización de este elemento.

¿Cómo puedo escribir este evento? y atrapar siempre que la visualización de este elemento cambie?

Answer 1

No puede obtener un evento onshow directamente en JavaScript. Recuerde que los siguientes métodos son no estándar.

en IE puede utilizar

onpropertychange event

incendios después de la propiedad de un elemento cambia

y para Mozilla

puede utilizar

watch

Relojes para una propiedad que se asignará un valor y se ejecuta una función cuando eso ocurre .

Answer 2

Esta es mi manera de hacer en onShow, como un plugin jQuery. Sin embargo, puede o no realizar exactamente lo que estás haciendo.

(function($){ 
    $.fn.extend({ 
    onShow: function(callback, unbind){ 
     return this.each(function(){ 
     var _this = this; 
     var bindopt = (unbind==undefined)?true:unbind; 
     if($.isFunction(callback)){ 
      if($(_this).is(':hidden')){ 
      var checkVis = function(){ 
       if($(_this).is(':visible')){ 
       callback.call(_this); 
       if(bindopt){ 
        $('body').unbind('click keyup keydown', checkVis); 
       } 
       }       
      } 
      $('body').bind('click keyup keydown', checkVis); 
      } 
      else{ 
      callback.call(_this); 
      } 
     } 
     }); 
    } 
    }); 
})(jQuery); 

Puede llamar a este dentro de la función $ (document) ready() y utilizar una devolución de llamada para disparar cuando se muestra el elemento, como tal.

$(document).ready(function(){ 
    $('#myelement').onShow(function(){ 
    alert('this element is now shown'); 
    }); 
}); 

Funciona mediante la unión de un clic, keyup, y el evento KeyDown al cuerpo para comprobar si se muestra el elemento, porque estos eventos son más propensos a causar un elemento que se muestra y se realizan con mucha frecuencia por la usuario. Esto puede no ser extremadamente elegante, pero hace el trabajo. Además, una vez que se muestra el elemento, estos eventos se desenredan del cuerpo para no seguir disparando y ralentizando el rendimiento.

Answer 3

También puede reemplazar el método predeterminado mostrar de jQuery:

var orgShow = $.fn.show; 
$.fn.show = function() 
{ 
    $(this).trigger('myOnShowEvent'); 
    orgShow.apply(this, arguments); 
    return this; 
} 

Ahora acaba de vincular a su código al evento:

$('#foo').bind("myOnShowEvent", function() 
{ 
    console.log("SHOWN!") 
}); 

Answer 4

El código desde este enlace que funcionó para mí: http://viralpatel.net/blogs/jquery-trigger-custom-event-show-hide-element/

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

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

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

Sin embargo, la función de devolución de llamada se llama primero y luego el elemento es sho wn/oculto. Por lo tanto, si tiene alguna operación relacionada con el mismo selector y debe hacerse después de mostrarse u ocultarse, la solución temporal es agregar un tiempo de espera durante unos pocos milisegundos.