當某些（任何）元素改變自己的高度時，有沒有什麼辦法可以設置jQuery事件？當某些DOM元素改變高度時jQuery事件

我真的不能找出我怎麼能火這個

感謝大家會幫我

，如：

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

//do somenthing 
});

來源

2012-12-18 sbaaaang

這將是非常激烈的過程。是否有您想要監測的特定元素？如果是這樣，這並不難。您只需創建一個計時器並觀察高度是否有所不同。 – SpYk3HH

更具體一點，你在做什麼元素？ –

可能的重複：http://stackoverflow.com/questions/172821/detecting-when-a-divs-height-changes-using-jquery – tungd

每當你做了一些改變元素高度的事情，就觸發一個事件。

$("#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-18 15:37:23

這可能會很酷，沒有其他方法來避免定時器？ – sbaaaang

@Badaboooooom這個解決方案不使用定時器。在我看來，這是解決您的問題的最佳解決方案。 –

我認爲其他人說得對，我必須使用** $（'body'）。on（'resize'，'*'，function（event）{...}）** – sbaaaang

我認爲你可以使用的唯一事件是「 DOMSubtreeModified」。

來源

2012-12-18 15:34:40

也許MutationEvent？ http://stackoverflow.com/questions/6659662/why-is-the-domsubtreemodified-event-deprecated-in-dom-level-3 – sbaaaang

DOMSubtreeModified =根據MDN棄用。改用突變觀察者 - https://developer.mozilla.org/DOM/DOM_Mutation_Observers – sbeliv01

鏈接返回404：P – sbaaaang

你應該使用jQuery mutate具有處理程序width，height多

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

來源

2012-12-18 15:37:31

我想過這個問題，我知道你已經有了答案，觸發事情是偉大的想法，但如果你真的想要一個簡單的插件上所有可能的元素，你可以使用我下面做的。這只是一個簡單的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-18 16:44:00 SpYk3HH

當某些DOM元素改變高度時jQuery事件

回答

jsFiddle

相關問題