jsFiddle

Question

当某些（任何人）元素改变自己的高度时，有没有办法设置jquery事件？

我真的不知道怎么能解雇这个

感谢大家帮助我

像：

$('body *').onHeightChange(function(){

//do somenthing
});

Answer 1

每当你做一些改变元素高度的事情时，都会触发一个事件。

$("#somelement").slideDown().trigger("heightchange");

现在你可以绑定到：

$("body").on("heightchange",function(e){
    var $el = $(e.target); // the element that has a new height.
});

你甚至可以monkeypatch很多可以改变高度的jQuery方法，让他们在使用方法之前和之后测试高度并相应地触发事件。以下是未经测试的示例

var topatch = ["slideup","slidedown","height","width","attr","css","animate"];
$.each(topatch,function(i,method){
    var oldfn = $.fn[method];
    $.fn[method] = function(){
        return this.each(function(){
            var $this = $(this), currHeight = $this.css("height"),
                result = oldfn.apply($this,arguments); 
            // check for promise object to deal with animations
            if ( $.isFunction(result.promise) ) {
                result.promise().done(function(){
                    if ( currHeight != $this.css("height") ) {
                        $this.trigger("heightchange");
                    }
                });
                return;
            }
            if ( currHeight != $this.css("height") ) {
                $this.trigger("heightchange");
            }            
        });
    };
});

Answer 2

我认为您可以使用的唯一事件是'DOMSubtreeModified'。

Answer 3

您应该使用jQuery mutate，其中包含width，height及更多

的处理程序

http://www.jqui.net/jquery-projects/jquery-mutate-official/

Answer 4

我考虑过这个问题，而且我知道你已经有了答案，触发器是个好主意，但如果你真的想在所有可能的元素上插入一个简单的插件，你可以使用我在下面做的。它只是一个简单的jQuery插件，它可以在高度发生变化时使用计时器和回调函数。请参阅小提琴，例如使用。警告页面上的元素太多可能会导致问题。

jsFiddle

脏插件

(function($) {
    if (!$.onHeightChange) {
        $.extend({  
            onHeightChange: function(callBack) {
                if (typeof callBack == "string") {
                    switch (callBack.toLowerCase()) {
                        case "play":
                            $.onHeightChange.init();
                            break;
                        case "stop":
                            try { clearInterval($.onHeightChange.timer); } catch(err) { };
                            break;
                    }
                }
                else if (typeof callBack == "function" || callBack == undefined)
                {
                    $.onHeightChange.callback = callBack;
                    $.onHeightChange.init(callBack);
                }
            }
        });
        $.onHeightChange.timer;
        $.onHeightChange.init = function(callBack) {
            $("body,body *").each(function(i) {
                $(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() });
            });
            try { clearInterval($.onHeightChange.timer); } catch(err) { };
            $.onHeightChange.timer = setInterval(function() {
                $("body, body *").each(function(i) {
                    if ($(this).data("onHeightChange").height != $(this).height()) {
                        $(this).data("onHeightChange", { height: $(this).height(), outer: $(this).outerHeight() });
                        if ($.onHeightChange['callback']) {
                            if (typeof $.onHeightChange.callback == "function") return $.onHeightChange.callback .call(this, $(this), $(this).height(), $(this).outerHeight());
                        }
                    }
                });
            }, 100);
        };
    }
})(jQuery);

示例使用

$.onHeightChange(function(ele, height, outer) {
    console.log(ele, height, outer);
});
/*---------------------------------------------*/
$.onHeightChange("stop");
$.onHeightChange("play");

当一些dom元素改变高度时的jQuery事件

4 个答案:

jsFiddle