jQuery: Comment lier un événement pour la div quand il devient visible?

Démarrer et arrêter la mise à jour AJAX en fonction de la visibilité. Vous pouvez utiliser .is() pour retourner un VRAI ou un FAUX pour :visible :

 var timer; // Variable to start and top updating timer // This if statement has to be part of the event handler for the visibility // change of selector..... so there might be more straight forward solution // see the last example in this answer. if ($(selector).is(":visible")) { // Start / continue AJAX updating timer = setInterval(AJAXupdate, 1000); } else { // Stop AJAX updating clearInterval(timer); } 

Voici un exemple simple d’une timer qui s’arrête lorsqu’elle est invisible. Notez que les nombres ne continuent pas à augmenter quand ils ne sont pas visibles:

 (function() { var switcher; // variable to start and stop timer // Function / event that will be started and stopped function count() { $("div").html(1 + parseInt($("div").html(), 10)); } $(function() { // <== doc ready // Start timer - it is visible by default switcher = setInterval(count, 1000); $("input").click(function() { $("div").toggle(); // Toggle timer visibility // Start and stop timer based on visibility if ($("div").is(":visible")) { switcher = setInterval(count, 1000); } else { clearInterval(switcher); } }); }); }());​ 

exemple jsFiddle

Bien sûr, dans le cas ci-dessus, et peut-être dans votre cas, il est plus simple d'activer ou de désactiver alternativement la mise à jour:

 (function() { var switcher; function count() { $("div").html(1 + parseInt($("div").html(), 10)); } $(function() { switcher = setInterval(count, 1000); $("input").toggle(function() { clearInterval(switcher); $("div").toggle(); }, function() { switcher = setInterval(count, 1000); $("div").toggle(); }); }); }()); 

exemple jsFiddle

Avoir l’événement toujours lié à la div, mais à l’intérieur de l’événement, procédez comme suit:

 if($(self).is(":visible")){ // Implement your code } 

Désormais, votre événement ne sera déclenché que si l’élément est visible pour l’utilisateur.

La solution que j’ai trouvée consistait à déclencher un événement de focus lorsque l’onglet est sélectionné.

 var tabContainers = $ ('div.tabs> div');

 $ ('div.tabs ul.tabNavigation a'). click (function () {
     tabContainers.each (function () {

         tabContainers.hide (). filter (this.hash) .show ();

         if ($ (this) .is (': visible')) {
             $ (this) .focus ();  // déclenche cet événement si l'onglet est visible
         } autre {
             $ (this) .blur ();  // si l'onglet est invisible
         }
     });
 });

Et puis j’attrape ces événements de focus et de blur :

 $ (document) .ready (fonction () {
     $ ("# tabID"). bind ("focus", function () {
         if ($ (this) .is (": visible")) {
             // commence ajax ici
         }
     });

     $ ("# tab '. $ key.'"). bind ("flou", fonction () {
         si (! $ (this) .is (": visible")) {
             // arrêtez ajax ici
         }
     });
 });