Question

我正在尝试使用jquery 1.10.2上的jquery resize插件（http://benalman.com/projects/jquery-resize-plugin/）来检测元素resize。

$("#element").resize(function(){
  console.log("resize");
});

我在Firefox 25上进行了测试，我收到了这个错误：

Error: TypeError: r is undefined
Source File: jquery.ba-resize.min.js
Line: 9

我该如何解决？有没有替代方法/插件来做这个？

谢谢。

Answer 1

您需要一个与https://github.com/marcj/css-element-queries的css-element-queries捆绑在一起的调整大小传感器。

new ResizeSensor($('.elements'), function(){
    console.log('resize')
});

jQuery的.resize仅适用于window个对象，因为只有window有一个事件onresize。所有其他元素都没有，因此你需要一个polyfill。我已经看过很多其他的jQuery插件，它们允许你监听所有元素类型的调整大小更改，但要注意：这些插件使用setTimeout()或间隔来检查它们是非常慢的尺寸变化，而不是设置一个真正的调整大小传感器，就像您在上面的链接中找到的那样。

Answer 2

使用Clay.js（https://github.com/zzarcon/clay）检测元素大小的变化非常简单：

var el = new Clay('.element');

el.on('resize', function(size) {
   console.log(size.height, size.width);
});

Answer 3

DIV不会触发调整大小事件，因此您无法完全按照编码方式执行操作，但您可以查看监视DOM属性。

如果你实际上正在使用像resizable一样的东西，这是div改变大小的唯一方法，那么你的resize插件可能会实现自己的回调。

Answer 4

删除该插件，jQuery自行完成。

var element = $('#element');
var current_size = element.width()+'x'+element.height();
element.resize(function(){ 
    var this_size = $(this).width()+'x'+$(this).height();
    if(current_size!==this_size){
      console.log('changed');
      current_size = this_size;
    }
});

PS：不测试

jQuery检测元素调整大小

4 个答案: