绑定动态元素的简便方法而无需调用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将自动获得功能