5

当某些（任何人）元素改变自己的高度时，有什么方法可以设置 jquery 事件？

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

谢谢大家会帮助我

像：

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

//do somenthing
});
4

4 回答 4

9

每当您执行更改元素高度的操作时，都会触发一个事件。

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

现在您可以绑定到它：

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

您甚至可以对许多可以更改高度的 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");
            }            
        });
    };
});​
于 2012-12-18T15:37:23.390 回答
2

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

于 2012-12-18T15:34:40.453 回答
1

你应该使用which jQuery mutatehas handlers forwidth等height

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

于 2012-12-18T15:37:31.130 回答
1

我想了想，我知道你已经有了答案，触发器是个好主意，但如果你真的想要一个所有可能元素的简单插件，你可以使用我在下面做的。它只是一个简单的 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");
于 2012-12-18T16:44:00.400 回答