jquery - jQuery：当 div 变得可见时，如何为它绑定一个事件？

Question

我有一个 div 元素： <div id="tab1"> Tab data </div>.

当这个 div 变得可见（gets）时如何绑定自定义事件display: block;？

而且我想在这个 div 变得不可见（gets display: none;）时绑定一个事件。

我想在 jQuery 中做到这一点。

编辑：我正在制作带有 ajax 内容的简单标签。我希望此选项卡上的内容仅在选项卡可见时才进行 ajax 更新。

Answer 1

让事件始终绑定到 div，但在事件内部，执行以下操作：

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

现在，只有当元素对用户可见时才会触发您的事件。

Answer 2

根据可见性启动和停止 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 示例

Answer 3

我找到的解决方案是focus在选择选项卡时触发事件。

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

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

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

        if ( $(this).is(':visible') ) {
            $(this).focus(); // 如果选项卡可见，则触发此事件
        } 别的 {
            $(this).blur(); // 如果选项卡不可见
        }
    });
});

然后我捕捉到这些focus和blur事件：

$(文档).ready(函数(){
    $("#tabID").bind("focus",function(){
        if ( $(this).is(":visible") ) {
            // 这里开始ajax
        }
    });

    $("#tab'.$key.'").bind("blur",function(){
        if ( !$(this).is(":visible") ) {
            // 在这里停止 ajax
        }
    });
});