我根据Glenns的想法改变了Catalint的隐藏/显示事件触发器。 我的问题是我有一个模块化的应用程序。我改变模块之间显示和隐藏div父母。然后，当我隐藏一个模块并显示另一个模块时，用他的方法，当我在模块之间更改时，我有一个可见的延迟。我只需要偶尔听一听这件事，而且是在一些特殊的孩子身上。所以我决定用displayObserver类只通知子对象

$.each(["show", "hide", "toggleClass", "addClass", "removeClass"], function () {
    var _oldFn = $.fn[this];
    $.fn[this] = function () {
        var hidden = this.find(".displayObserver:hidden").add(this.filter(":hidden"));
        var visible = this.find(".displayObserver: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”或“hide”事件时，我必须给他添加类“displayObserver”，当它不想继续监听它时，我将他删除类

bindDisplayEvent: function () {
   $("#child1").addClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
   $("#child1").on("show", this.onParentShow);
},

bindDisplayEvent: function () {
   $("#child1").removeClass("displayObserver");
   $("#child1").off("show", this.onParentShow);
},

我希望得到帮助

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(function() {
  jQuery("#contentDiv:hidden").show().trigger('show');

  jQuery('#contentDiv').on('show', function() {
    console.log('#contentDiv is now visible');
    // your code here
  });
});

$( window ).scroll(function(e,i) {
    win_top = $( window ).scrollTop();
    win_bottom = $( window ).height() + win_top;
    //console.log( win_top,win_bottom );
    $('.onvisible').each(function()
    {
        t = $(this).offset().top;
        b = t + $(this).height();
        if( t > win_top && b < win_bottom )
            alert("do something");
    });
});

如果您想在所有实际可见的元素(和子元素)上触发事件，则使用$。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”)来添加覆盖。

没有本地事件你可以挂钩到这个，但是你可以触发一个事件从你的脚本后，你已经使div可见使用.trigger函数

e.g

//declare event to run when div is visible
function isVisible(){
   //do something

}

//hookup the event
$('#someDivId').bind('isVisible', isVisible);

//show div and trigger custom event in callback when div is visible
$('#someDivId').show('slow', function(){
    $(this).trigger('isVisible');
});