jQuery:如何在 div 可见时为其绑定事件?
-
27-09-2019 - |
题
我有一个 div 元素:<div id="tab1">
Tab data
</div>
.
当这个 div 变得可见时如何绑定自定义事件(获取 display: block;
)?
而且我想在这个 div 变得不可见时绑定一个事件(获取 display: none;
).
我想用 jQuery 来做这件事。
编辑:我正在使用 ajax 内容制作简单的选项卡。我希望仅当该选项卡可见时才通过 ajax 更新该选项卡上的内容。
解决方案
根据可见性启动和停止 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 示例
其他提示
有事件总是难免的股利,但该事件中,做一些这样的:
if($(self).is(":visible")){
// Implement your code
}
现在您的事件只被触发如果元素是对用户可见。
我发现的溶液火起来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 } }); });
不隶属于 StackOverflow