jQuery: Как да обвържа събитие за div, когато стане видимо?

Имам елемент div: <div id="tab1"> Tab data </div>.

Как да обвържа персонализирано събитие, когато този div стане видим (получава display: block;)?

И също така бих искал да обвържа събитие, когато този div стане невидим (получава display: none;).

Бих искал да направя това в jQuery.

Редактиране: правя прости раздели с ajax съдържание. Искам съдържанието на тези раздели да се актуализира чрез ajax само когато разделът е видим.


jquery tabs jquery-tabs
person foreline    schedule 04.10.2010    source източник
comment
Можете ли да дадете малко повече контекст на това, което правите?   -  person Nick Craver    schedule 05.10.2010
comment
Въпреки че един от коментаторите по-долу даде работещо решение, предполагам, че би било по-умно да се обвърже с персонализирани събития за превключване на раздели. Това е много по-интелигентно от наблюдението на видимостта на съдържанието на страницата.   -  person BBonifield    schedule 05.10.2010
comment
Моля, споделете част от вашия Ajax код.   -  person Mottie    schedule 05.10.2010

Отговори (3)


arrow_upward
3
arrow_downward

Стартирайте и спрете актуализацията на AJAX въз основа на видимостта. Можете да използвате .is(), за да върнете TRUE или FALSE за < a href="http://api.jquery.com/visible-selector/" rel="nofollow">: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);
}

Ето прост пример за таймер, който спира, когато е невидим. Имайте предвид, че числата не се увеличават, когато не се виждат:

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

пример за jsFiddle

Разбира се, в горния случай, а може би и във вашия случай, е по-ясно просто да включите и изключите актуализацията:

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

    });

}());

пример за jsFiddle

person Peter Ajtai    schedule 05.10.2010
comment
Въпросът ми не беше за това как да започна/спра изпращането на ajax заявки, а за това как да обвържа събитие с div, когато стане видимо (когато разделът е активен). - person foreline; 05.10.2010
comment
@SaltLake - Да. jsFiddle е доста полезен и забавен! - person Peter Ajtai; 05.10.2010

arrow_upward
3
arrow_downward

Събитието винаги да е свързано с div, но вътре в събитието направете нещо като следното:

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

Сега вашето събитие ще се задейства само ако елементът е видим за потребителя.

person Mike Trpcic    schedule 04.10.2010

arrow_upward
1
arrow_downward

Решението, което намерих, беше да задействам събитие focus, когато разделът е избран.

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

И тогава улавям тези focus и 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
        }
    });
});
person foreline    schedule 05.10.2010