Comment écrire un événement onshow en utilisant javascript/jquery?

Question

J'ai une balise d'ancrage sur ma page, je veux un événement attaché, qui se déclenchera lorsque l'affichage de cet élément changera.

Comment écrire cet événement? et attraper chaque fois que l'affichage de cet élément change?

Answer 1

Vous ne pouvez pas obtenir un événement onshow directement en JavaScript. Rappelez-vous que les méthodes suivantes sont non standard.

dans IE, vous pouvez utiliser

onpropertychange event

Les incendies après que la propriété d'un élément change

et pour Mozilla

vous pouvez utiliser

watch

Montres pour une propriété à attribuer une valeur et exécute une fonction lorsque ce se produit.

Answer 2

C'est ma façon de faire sur onShow, en tant que plugin jQuery. Il peut ou peut ne pas effectuer exactement ce que vous faites, cependant.

(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); 

Vous pouvez appeler cette fonction dans la $ (document) .ready() et utiliser un rappel au feu lorsque l'élément est montré, comme si.

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

Il agit en se liant un clic, keyup et événement keydown au corps pour vérifier si l'élément est représenté, parce que ces événements sont plus susceptibles de causer un élément à afficher et sont très souvent effectuées par la utilisateur. Cela peut ne pas être extrêmement élégant mais fait le travail. De plus, une fois l'élément affiché, ces événements sont détachés du corps pour ne pas continuer à tirer et ralentir les performances.

Answer 3

Vous pouvez également remplacer la méthode show par défaut de jQuery:

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

Maintenant, il suffit lier votre code à l'événement:

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

Answer 4

Le code de ce lien a fonctionné pour moi: 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'); 
}); 

Cependant, la fonction de rappel est appelée en premier, puis l'élément est sho wn/caché. Donc, si vous avez une opération liée au même sélecteur et qu'elle doit être effectuée après avoir été affichée ou masquée, la solution temporaire consiste à ajouter un délai d'attente de quelques millisecondes.