无需调用函数jquery即可轻松绑定动态元素

Question

我目前有一个页面，用户可以在其中拖动内容，调整大小等等。

基本结构如下所示：

$('.element').on().resizable().draggable();

在文档加载开始时调用它会添加绑定事件，可调整大小和可拖动。现在我遇到的问题是用户可以动态添加新元素。上述代码不再涵盖这些新元素。我最终做的是以下内容：

function bindEvents(){
    $('.element').on().resizable().draggable();
}

bindEvents（）;

然后当添加元素时，我关闭当前实现，然后再次打开它，以便它包含新元素：

$('.element').off().resizable("destroy").draggable("destroy");
bindEvents();

不，我知道这是非常低效的，并且很可能使用比所需更多的内存。我的问题是，有更好的方法吗？有没有办法将一个特定元素添加到已建立的绑定元素组中？

谢谢！

Answer 1

如果你不想在旧物品上浪费工作，那么就用一些东西给它们打上标签，然后再避免使用它们，反之亦然。

function bindEvents(){
    $('.element').not('.initialized').addClass('initialized')
        .on().resizable().draggable();
}

Answer 2

为什么不使用on()的委托功能并绑定到元素的容器？

$('#container').on('mouseover', '.element', function(e) {
    $(this).resizable().draggable();
});

默认情况下，您希望为可拖动类添加样式，但通过将ui-resizable类添加到元素中可以轻松实现：

<div class="element ui-resizable">Foo</div>

与过滤器匹配的所有元素（'.element'）会在添加到#container时自动获取功能