当某些（任何）元素改变自己的高度时，有没有什么办法可以设置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

相关问题