5

div 要素があります: <div id="tab1"> Tab data </div>.

この div が表示される (取得する) ときにカスタム イベントをバインドする方法はdisplay: block;?

また、この div が非表示 (gets) になったときにイベントをバインドしたいと思いdisplay: none;ます。

これをjQueryでやりたいです。

編集: ajax コンテンツを含む単純なタブを作成しています。このタブのコンテンツは、タブが表示されている場合にのみ ajax で更新されます。

4

3 に答える 3

3

可視性に基づいて AJAX 更新を開始および停止します。.is()次の場合に TRUE または FALSE を返すために使用でき: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 の例

于 2010-10-05T00:56:05.340 に答える
3

イベントを常に div にバインドしますが、イベント内では次のようにします。

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

これで、要素がユーザーに表示されている場合にのみ、イベントがトリガーされます。

于 2010-10-04T20:57:41.217 に答える
1

focus私が見つけた解決策は、タブが選択されたときにイベントを起動することでした。

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

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

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

        if ( $(this).is(':visible') ) {
            $(this).focus(); // タブが表示されている場合、このイベントを発生させます
        } そうしないと {
            $(this).blur(); // タブが非表示の場合
        }
    });
});

そして、これらfocusとblurイベントをキャッチします：

$(document).ready(function(){
    $("#tabID").bind("フォーカス",関数(){
        if ( $(this).is(":visible") ) {
            // ここで ajax を開始
        }
    });

    $("#tab'.$key.'").bind("blur",function(){
        if ( !$(this).is(":visible") ) {
            // ここで ajax を止める
        }
    });
});
于 2010-10-05T02:18:57.263 に答える