jQuery UI的draggable()和resizable()函数

Question

我希望以这样的方式编写draggable()和resizable()代码，使得所有具有特定类别的未来元素都可以继承这些插件而无需再次调用它们。

$('div.resizeMe').resizable({
containment: 'parent',
minWidth: 400,
minHeight: 200
})

当上述代码被执行时，所有具有resizeMe类别的div元素都会继承resizable()函数。但是如果我向BODY添加了一个具有相同类别的新div，则需要再次执行该代码。因此，我的目标是如何重新编写该代码，使其适用于所有包括未来元素在内的元素。

- foxlance

Answer 1

您可以使用.livequery()插件，它将在当前匹配项上执行并在新元素出现时执行，如下所示：

$('div.resizeMe').livequery(function() {
  $(this).resizable({
    containment: 'parent',
    minWidth: 400,
    minHeight: 200
  });
});

这将在当前和未来的 div.resizeMe 元素上运行。

如果您使用 $.ajax() 加载内容，另一种方法是在 ajax 的 success 或 complete 回调中运行代码，例如：

$.ajax({
  //options...
  success: function(data) {
    $('div.resizeMe', data).resizable({...options...});
  }
});

这会对响应中的 div.resizeMe 元素运行，但不会对您已经可调整大小的元素运行。

- Nick Craver