javascript - 绑定(bind)动态元素的简单方法，无需调用 jquery 函数

Question

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

基本结构如下所示:

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

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

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

bindEvents();

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

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

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

谢谢!

Answer 1

如果您不想在旧元素上浪费时间，请在它们上打上某种品牌，并在以后避免使用它们，反之亦然。

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