Sự kiện jQuery khi một số phần tử dom thay đổi chiều cao

Question

Có cách nào để đặt sự kiện jquery khi một phần tử (ai đó) thay đổi chiều cao của riêng mình không?

Tôi thực sự không thể tìm hiểu làm thế nào tôi có thể bắn này

nhờ tất cả mọi người sẽ giúp tôi

như:

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

//do somenthing 
}); 

Answer 1

Bất cứ khi nào bạn làm điều gì đó thay đổi chiều cao của phần tử, hãy kích hoạt sự kiện.

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

Bây giờ bạn có thể liên kết với rằng:

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

Bạn thậm chí có thể monkeypatch rất nhiều các phương pháp jQuery có thể thay đổi chiều cao và họ đã kiểm tra chiều cao trước và sau khi sử dụng phương pháp và kích hoạt sự kiện tương ứng. Dưới đây là một ví dụ chưa được kiểm tra

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

Tôi nghĩ rằng sự kiện duy nhất mà bạn có thể sử dụng là ' DOMSubtreeModified '.

Answer 3

bạn nên sử dụng jQuery mutate trong đó có xử lý cho width, height và nhiều hơn nữa

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

Answer 4

tôi nghĩ về nó, và tôi biết bạn đã có câu trả lời của bạn, kích hoạt điều là ý tưởng tuyệt vời, nhưng nếu bạn thực sự muốn có một plugin đơn giản trên tất cả các yếu tố có thể, bạn có thể sử dụng những gì tôi đã thực hiện bên dưới. Nó chỉ là một plugin jQuery đơn giản mà làm cho việc sử dụng một bộ đếm thời gian và một chức năng gọi lại cho khi một chiều cao đã thay đổi. Xem fiddle ví dụ sử dụng. Cảnh báo Quá nhiều yếu tố trên trang có thể gây ra sự cố.

jsFiddle

bẩn Plugin

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

Ví dụ sử dụng

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