javascript - 一部のdom要素が高さを変更したときのjQueryイベント

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.
});

高さを変更し、メソッドを使用する前後に高さをテストし、それに応じてイベントをトリガーすることができる多くの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ハンドラーがあるものを使用する必要がありますwidthheight

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");