jquery - modales - ventana modal bootstrap

jQuery: ¿Cómo vincular un evento para el div cuando se vuelve visible?

Question

Tengo un elemento div: <div id="tab1"> Tab data </div> .

Cómo enlazar un evento personalizado cuando este div se vuelve visible (obtiene display: block; )?

Y también me gustaría enlazar un evento cuando este div se vuelve invisible (obtiene display: none; ).

Me gustaría hacer esto en jQuery.

Editar: estoy haciendo pestañas simples con contenido ajax. Quiero que el contenido de estas pestañas solo se actualice ajax cuando la pestaña esté visible.

Answer 1

Haga que el evento siempre esté vinculado al div, pero dentro del evento, haga algo como lo siguiente:

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

Ahora su evento solo se activará si el elemento es visible para el usuario.

Answer 2

Inicie y detenga la actualización de AJAX según la visibilidad. Puede usar .is() para devolver un VERDADERO o FALSO para :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);
}

Aquí hay un ejemplo simple de un temporizador que se detiene cuando es invisible. Tenga en cuenta que los números no siguen aumentando cuando no son 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);            
            }
        });
    });
}());
​

Ejemplo jsFiddle

Por supuesto, en el caso anterior, y tal vez su caso, es más sencillo simplemente encender o apagar alternativamente la actualización:

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

    });

}());

Ejemplo jsFiddle

Answer 3

La solución que encontré fue disparar el evento de focus cuando se selecciona la pestaña.

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(); // fire this event if tab is visible } else { $(this).blur(); // if tab is invisible } }); });

Y luego atrapo estos eventos de focus y blur :

$(document).ready(function(){ $("#tabID").bind("focus",function(){ if ( $(this).is(":visible") ) { // start ajax here } }); $("#tab''.$key.''").bind("blur",function(){ if ( !$(this).is(":visible") ) { // stop ajax here } }); });