jQuery：如何在div变为可见时绑定事件？

我有一个div元素：

Tab data

。

如何在此div变为可见时绑定自定义事件（获取display: block; ）？

而且当我的div变得不可见时，我想绑定一个事件（获取display: none; ）。

我想在jQuery中这样做。

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

Answer 1

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

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

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

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

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'））{
             $（本）.focus（）;  //如果选项卡可见，则触发此事件
         } else {
             $（本）.blur（）;  //如果tab不可见
         }
     }）;
 }）;

然后我抓住了这些focus和blur事件：

 $（文件）。就绪（函数（）{
     $（ “＃tabID”）。结合（ “焦点”，函数（）{
         if（$（this）.is（“：visible”））{
             //在这里开始ajax
         }
     }）;

     $（ “＃标签 '$键。' ”）。绑定（“ 模糊”，函数（）{
         if（！$（this）.is（“：visible”））{
             //在这里停止ajax
         }
     }）;
 }）;