javascript - 如何使用 jquery 在一般 DOM 对象调整大小上触发事件

Question

有一个有关窗口大小调整的事件。

$(window).resize(function() {
    ...
});

但是，如果我想在任何类型的 DOM 对象上触发事件，例如:

$('div#myDiv').resize(function() {
    ...
));

但是上面的好像不行。这可能并且方便吗？或者还有什么好的办法吗？

Answer 1

这是不可能的 - 但也没有必要。如果您的 div 根据窗口大小(即通过媒体查询)更改大小，只需使用 $(window).resize()。如果它是通过其他一些 javascript 代码更改的，您应该直接连接到该代码。

如果您愿意，您可以在 div 上触发调整大小事件并收听该事件，但您仍然需要手动触发该事件 - 即

$('div#myDiv').on('custom_resize', function() {
    ...
));

// whenever you change div size
$('div#myDiv').trigger('custom_resize');

如果您无权访问更改 div 的代码，您可以轮询宽度/高度的更改 - 例如(仅宽度):

var div_width = $('div#myDiv').width();
setInterval(function() {
    if (div_width != $('div#myDiv').width()) {
        div_width = $('div#myDiv').width();
        $('div#myDiv').trigger('custom_resize');
    }
}, 1);

如果您要动态添加图像，这应该可行:

$('<img>').on('load', function() { ... })
          .attr('src', {img url})
          .appendTo({container})