【问题标题】：jQuery event when some dom element changed height某些 dom 元素更改高度时的 jQuery 事件
【发布时间】：2012-12-05 20:30:00
【问题描述】：

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

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

感谢大家帮助我

喜欢：

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

//do somenthing
});

【问题讨论】：

这在 proc 上会非常激烈。是否有您想要监控的特定元素？如果是这样，那就不太难了。您只需创建一个计时器并观察高度是否不同。
更具体一点，你在什么元素上做这个？
可能重复：stackoverflow.com/questions/172821/…
不，我没有特定的元素，因为它可以是一个 div 作为跨度，随机
对不起，如果我让任何人感到困惑，我的代码 sn-p 仅适用于插件 benalman.com/projects/jquery-resize-plugin。当您没有特定元素时（如作者的情况），它旨在提供帮助。该插件在内部使用计时器，并且当元素被任何东西而不是某些特定的 jQuery 函数更改时仍然可以工作。 @RobinvanBaalen：确实如此，但不是很多，因为我们并没有真正关注每一个元素，而是等待body 的事件泡沫。您可以将body 替换为可能更改的元素的最外层容器。

标签： javascript jquery dom javascript-events

【解决方案1】：

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

$("#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");
            }            
        });
    };
});

【讨论】：

@Badaboooooom 这个解决方案不使用计时器。在我看来，这是解决您问题的最佳方案。
我认为其他人说得对，我必须使用 $('body').on('resize', '*', function(event) {...})
resize 事件仅发生在窗口上，除非您应用与我类似的代码来触发它，否则将其用于元素将不起作用。 developer.mozilla.org/en-US/docs/DOM/element.onresize

【解决方案2】：

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

【讨论】：

也许是 MutationEvent ？ stackoverflow.com/questions/6659662/…
DOMSubtreeModified = 根据 MDN 已弃用。改用突变观察者 - developer.mozilla.org/DOM/DOM_Mutation_Observers
@RobinvanBaalen 给我返回 404 不知道为什么这样：/
@RobinvanBaalen ok 发现问题出在语言上试试这个developer.mozilla.org/it/DOM/DOM_Mutation_Observers
@Badaboooooom 那么，如果您因为原始页面不支持您的语言而被自动转发到 404 页面，我想这是一个错误，您应该 report 它。跨度>

【解决方案3】：

你应该使用jQuery mutate，它有width、height等的处理程序

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

【讨论】：

【解决方案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");

【讨论】：