我在我的网站上使用jQuery，我想在某个div可见时触发某些操作。
是否有可能附加某种“isvisible”事件处理程序到任意div，并有一定的代码运行时，他们的div是可见的?
我想要如下伪代码:
$(function() {
$('#contentDiv').isvisible(function() {
alert("do something");
});
});
警报(“do something”)代码在contentDiv实际可见之前不应该触发。
谢谢。
当前回答
基于Glenns思想的隐藏/显示事件触发器: 删除切换，因为它火灾显示/隐藏，我们不希望2个火灾为一个事件
$(function(){
$.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
var _oldFn = $.fn[this];
$.fn[this] = function(){
var hidden = this.find(":hidden").add(this.filter(":hidden"));
var visible = this.find(":visible").add(this.filter(":visible"));
var result = _oldFn.apply(this, arguments);
hidden.filter(":visible").each(function(){
$(this).triggerHandler("show");
});
visible.filter(":hidden").each(function(){
$(this).triggerHandler("hide");
});
return result;
}
});
});
其他回答
如果您想在所有实际可见的元素(和子元素)上触发事件，则使用$。show, toggle, toggleClass, addClass，或removeClass:
$.each(["show", "toggle", "toggleClass", "addClass", "removeClass"], function(){
var _oldFn = $.fn[this];
$.fn[this] = function(){
var hidden = this.find(":hidden").add(this.filter(":hidden"));
var result = _oldFn.apply(this, arguments);
hidden.filter(":visible").each(function(){
$(this).triggerHandler("show"); //No bubbling
});
return result;
}
});
现在是元素:
$("#myLazyUl").bind("show", function(){
alert(this);
});
你可以通过将额外的jQuery函数添加到顶部的数组(如“attr”)来添加覆盖。
只需将触发器与选择器绑定，并将代码放入触发器事件中:
jQuery(function() {
jQuery("#contentDiv:hidden").show().trigger('show');
jQuery('#contentDiv').on('show', function() {
console.log('#contentDiv is now visible');
// your code here
});
});
基于Glenns思想的隐藏/显示事件触发器: 删除切换，因为它火灾显示/隐藏，我们不希望2个火灾为一个事件
$(function(){
$.each(["show","hide", "toggleClass", "addClass", "removeClass"], function(){
var _oldFn = $.fn[this];
$.fn[this] = function(){
var hidden = this.find(":hidden").add(this.filter(":hidden"));
var visible = this.find(":visible").add(this.filter(":visible"));
var result = _oldFn.apply(this, arguments);
hidden.filter(":visible").each(function(){
$(this).triggerHandler("show");
});
visible.filter(":hidden").each(function(){
$(this).triggerHandler("hide");
});
return result;
}
});
});
DOM突变观察者正在解决这个问题。它们允许你将观察者(一个函数)绑定到改变dom元素的内容、文本或属性的事件上。
随着IE11的发布，所有主流浏览器都支持此功能，请访问http://caniuse.com/mutationobserver
示例代码如下:
$（函数（） { $（'#show'）.click（function（） { $（'#testdiv'）.show（）; }); var observer = new MutationObserver （function（mutations） { 警报（“属性已更改！ }); var target = document.querySelector（'#testdiv'）; observer.observe（target， { 属性：真 }); }); <div id=“testdiv” style=“display：none;”>hidden</div> <按钮 id=“显示”>显示隐藏的 div</button> <script type=“text/javascript” src=“https://code.jquery.com/jquery-1.9.1.min.js”></script>
有一个jQuery插件可以观察DOM属性的变化，
https://github.com/darcyclarke/jQuery-Watch-Plugin
你需要做的就是绑定MutationObserver
然后你可以使用它来观看div使用:
$("#selector").watch('css', function() {
console.log("Visibility: " + this.style.display == 'none'?'hidden':'shown'));
//or any random events
});
